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

Schlagwort: JavaScript

[JavaScript] Gleichheit

Strikte Gleichheit (‘===’)

  • prüft zwei Werte auf Gleichheit
  • ohne Konvertierung
let num = 0;
let obj = new String('0');
let str = '0';
let b = false;

// false
console.log(b === obj);
// false
console.log(num === b); 
// false
console.log(num === str);
// false
console.log(str === 1);
// false
console.log(obj === 1);
// true
console.log(num === 0);
// false
console.log(num === 1);

Lose Gleichheit (‘==’)

  • vergleicht zwei Werte auf Gleichheit
  • mit vorheriger Konvertierung zum gleichen Typ
let num = 0;
let obj = new String('0');
let str = '0';
let b = false;

// true
console.log(b == obj);
// true
console.log(num == b);
// true
console.log(num == str);
// false
console.log(str == 1);
// false
console.log(obj == 1);
// false
console.log(num == 1);
// true
console.log(num == 0);

Weiterführende Infos: Link

[JavaScript] JSON-Datei per HTTP-Request holen und parsen 

// Link zur JSON-Datei
let sURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
// Request-Object
let request = new XMLHttpRequest();
// MIME-Typen
// txt: "text/plain"
// html: "text/html"
// json: "application/json"
request.overrideMimeType('application/json');
// Requestmethode
request.open('GET', sURL, true);
// Datentyp
request.responseType = 'text';
// Handler für asyncrone Antwort des Requests
// wenn Daten erfolgreich geladen
request.onload = function() {
  console.log('onload()');
  // gesamte Response ausgeben
  let sJSON = request.response;
  console.log(sJSON);
  
  // JSON-Daten parsen
  let oJSON = JSON.parse(sJSON);
  // Wert eines Attributes ausgeben
  console.log(oJSON.homeTown);
};
// bei Änderung des Ready-States
request.onreadystatechange = function () {
  console.log('onreadystatechange()');
  console.log(request.readyState);
  console.log(request.status);
  console.log(request.statusText);
};
// Request absenden
request.send();

[JavaScript] Eine Klasse definieren

Klassendefinition ab ES6

// https://javascript.info/class
// https://javascript.info/property-accessors
class Rechteck
{
  // Konstruktor
  constructor(h, b) {
    this.h = h;
    this.b = b;
  }
   
  // public Properties
  get flaeche() {
    return this.Flaeche();
  }
 
  set hoehe(value) {
    this.h = value;
  }
  
  set breite(value) {
    this.b = value;
  }
  
  // public Methoden
  Flaeche() {
    return this.h * this.b;
  }
  
  // statische Methoden
  static Calc(h, b) {
    return h * b;
  }
}
 
const q = new Rechteck(10, 10);
 
console.log(q.flaeche);
q.hoehe = 5;
console.log(q.Flaeche());
console.log(Rechteck.Calc(2, 3));
console.log(Object.getOwnPropertyNames(Rechteck.prototype));

herkömmlich über “function”

function Rechteck(h, b)
{ 
    this.h = h;
    this.b = b;
   
    Rechteck.prototype.Flaeche = function() {
      return this.h * this.b;
    }
}
 
let q = new Rechteck(10, 10);
 
console.log(q.Flaeche());
console.log(Object.getOwnPropertyNames(Rechteck.prototype));

[JavaScript] DOM: Buttonklick realisieren 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0;">
  <title>DOM Buttonclick</title>
  <script>
  // Strict mode
  'use strict';

  // https://wiki.selfhtml.org/wiki/JavaScript/Module_und_Kapselung
  // private Scope deklarieren
  // anonyme Funktion 1
  (
      // anonyme Funktion 2
    function ()
    {
      // Initialisierung
      function init() {
        let btn = document.getElementById('btnTestButton');

        if (btn) {
          btn.addEventListener(
            "click",
            function () { txtout(); }
          );
        }
      }

      // Textausgabe
      function txtout() {
        let txt = document.getElementById("textfeld");
        if (txt) {
          txt.innerHTML = "Test1";
        }
      }

      // Event-Listener
      document.addEventListener(
        "DOMContentLoaded",
        function () { init(); }
      );
    }
    
    // Aufruf der inneren anonymen Funktion 2
    ()
  );
  </script>
</head>
<body>
    <p>Button klicken!</p>
    <button type="button" id="btnTestButton">Klick!</button>
    <div id="textfeld"></div>
</body>
</html>

[JavaScript] Fortgeschrittene Objektdefinition: Revealing Module Pattern (Kapselung plus öffentliche Schnittstelle) 

// https://wiki.selfhtml.org/wiki/JavaScript/Module_und_Kapselung

// Klasse / Modul definieren
// Grundmodul
let oModule = (function() {
  // private
  let priv1 = 100;
  let priv2 = 200;
   
  function priv_func1(var1, var2) {
    return var1 + var2 + priv1;
  }
 
  function priv_func2(var1, var2) {
    return var1 + var2 + priv2;
  }
   
  // public 
  return {
    public_func1: function(var1, var2) {
      return priv_func1(var1, var2) + priv_func2(var1, var2);
    }
  };
 
})();

// Erweiterung des Grundmoduls um public und private Methoden
(function (module) {
  // private
  let priv3 = 200;
  
  function priv_func3(var1, var2) {
    return var1 + var2 + priv3;
  }
  
  // public
  module.public_func2 = function(var1, var2) {
    return priv_func3(var1, var2);
  };
})(oModule);

// ok -> 306
console.log(oModule.public_func1(1, 2));
// ok -> 203
console.log(oModule.public_func2(1, 2));
// undefined
console.log(oModule.priv1);
// undefined
console.log(oModule.priv3);
// "error"
console.log(oModule.priv_func1(1, 2));
// "error"
console.log(oModule.priv_func3(1, 2));