JavaScript

Links

• JavaScript_HTML_DOM
• JavaScript_Debugging
• JavaScript_JUNIT

Entwicklung

console.log('Fehler!');

Funktionen (Prototypes)

var hypotenuse = function(a,b) { return Math.sqrt(a*a+b*b); }
console.log(hypotenuse(1, 44));

var addAll = function(){ 
  var rc=0; 
  for (var ix=0; ix < arguments.length; ix++)
    rc += arguments[ix]; 
  return rc;
}
addAll(1, 2, 3) === 6;

Strikte Gleichheit

• a == b: Referenzvergleich
• a === b: Inhaltsvergleich

null und undefined

• null und undefined sind verschieden.
• a == null deckt beides ab.

Typen

String

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith?retiredLocale=de

Beide Delimiter " und ' sind gleichwertig.

text += ".";
"xyz".substr(1, 2) === "y";
"abc".indexOf("bc") === 1;
"abab".indexOf("a", 1) == 2;
"abcb".replace("b", "x") === "axcb";
"a".toUpperCase() === "A";
"A".toLowerCase() === "a";
"abc".length === 3;
"abc".charAt(1) == "b";
const isText = file.endsWith(".txt");
" abc ".trim() = "abc";
const interpolated = `${b} or ${doit()} and a dollar: \$`;

Numbers

• Nur Gleitpunktzahlen werden benutzt.
• Daher haben Ganzzahlen max. 53 Bit
• x=Math.min(1,2,3); r=Math.floor(x); w=Math.sqrt(x);
• var undef = NaN;
• isNaN(1/0) === true;
• y = parseInt("123");
• str = 123.toString();

Datum

var now = new Date();
var x = new Date(2018, 0, 3, 22, 33, 44, 117);
/// !!! Monat ab 0 gezählt!!!
var year33Since1970 = new Date(24*3600*365.25 * 33);
var z = new Date("2017-3-8T16:31:10.117");
2017 === z.getFullYear();
2===z.getMonth();
8===z.getDate(); 
16===z.getHours(); 31==z.getMinutes(); 10===z.getSeconds(); 117===z.getMilliseconds();
z.setHours(3); z.setMinutes(9); z.setSeconds(33); z.setMilliseconds(118);
var utc = new Date(Date.UTC(2018, 4, 6));
var millisSince1970 = utc.getTime();

Dictionary

var x = { "zahl" : 33, "pair" : { "x" : true } };
document.writeln(x["zahl"]);
for (key in x){
  doIt(x[key]);
}
const contains = x.indexOf('never') >= 0;

Arrays

a=[1, 2, "wow"];
a0=a.shift(); a === [2, "wow"];
a.push(99); a === [2, "wow", 99];
a.concat([2, 3]) === [2, "wow", 99, 2, 3];
[1, 3, 5, 9].slice(0,2) === [1, 3] && [1, 3, 5, 9].slice(2,3) === [3];
[3, 9, 12].join(" ") === "3 9 12";
for (index in a){
  doIt(a[index]);
}
for (ix=0; ix < a.length; ix++){
   doIt(a[ix]);
}

Klassen

'use strict';
class Polygon {
   constructor(height, width) {
    this.name = 'Polygon';
    this.height = height;
    this.width = width;
  }
  sayName() {
    ChromeSamples.log('Hi, I am a ', this.name + '.');
  }
  sayHistory() {
    ChromeSamples.log('"Polygon" is derived from the Greek polus (many) ' +
      'and gonia (angle).');
  }
  static className() {
    return "Polygon";
  }
}
const p = new Polygon(300, 400);
p.sayName();

DOM

Initialisierung

var ready = (callback) => {
    if (document.readyState != "loading") {
        callback();
    } else {
        document.addEventListener("DOMContentLoaded", callback);
    }
}
ready(() => {
    /* Do things after DOM has fully loaded */
    const sorter = new TableSorter();
    sorter.initializeForm();
});

Objekte finden

// Array von Elements
const list = document.querySelectorAll("th.sortable");
const list2 = document.querySelectorAll(".theClass");
const list3 = document.querySelectorAll("#theId");
// Das erste Element:
const element1 = document.querySelector("th");
const element2 = document.getElementById("mainTable");
const list12 = document.getElementsByName('name');
const list13 = document.getElementsByClassName('sortable mainTable');
const list14 = document.getElementsByTagName('th');