===== JavaScript =====

==== Formularprüfung ====
<hidden><code javascript>
function emailverify(email) {
    return (email.search(/^w+((-w+)|(.w+))*@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+)*.[A-Za-z0-9]+$/) != -1);
}
function CheckRegister(f)
{
  if (f.username.value==""){alert('Benutzername fehlt');}
  else if (!f.username.value.match(/^[a-zA-Z0-9_-]+$/)){alert('Benutzername ungültig');}
  else if (f.password.value==""){alert('Passwort fehlt');}
  else if (f.password.value.length<8){alert('Passwort zu kurz');}
  else if (f.password.value!=f.password2.value){alert('Passwörter nicht gleich');}
      
  else return true;
  return false;
}
</code>
<code html>
<form>
  <label for="username">Benutzername: </label><input type="text" name="username" id="username" maxlength="20" />
  <label for="password">Passwort: </label><input type="password" name="password" id="password" />
  <label for="password2">PW wiederholen: </label><input type="password" name="password2" id="password2" />
  <input type="submit" name="register" value="registrieren" onclick="return CheckRegister(this.form);"/>
</form>
</code></hidden>

==== Datumsfunktionen (de): ====
<hidden><code javascript>
function GerDate(d) //formatiert ein JavaScript-Date-Objekt nach deutschem Format dd.mm.yyyy (wg. Probleme mit dateobj.toLocaleStr)
{
  var month = d.getMonth()+1;
  var year = d.getYear();
  var day = d.getDate();
  if(day<10) day = "0" + day;
  if(month<10) month= "0" + month;
  if(year<1000) year+=1900;
  return day+'.'+month+'.'+year;
}

function heute() //liefert das aktuelle Datum in deutscher Formatierung
{
  var today = new Date();
  var month = today.getMonth()+1;
  var year = today.getYear();
  var day = today.getDate();
  if(day<10) day = "0" + day;
  if(month<10) month= "0" + month;
  if(year<1000) year+=1900;
  return day+'.'+month+'.'+year;
}

function GerDay(mod) //Datumsmanipulation vom aktuellen Datum +/- x Tage
{
  var now = new Date();
  var today = now.getTime();
  if (mod)
  {
    var than = today + (mod * 24 * 60 * 60 * 1000);
    now.setTime(than);
  }
  var month = now.getMonth()+1;
  var year = now.getYear();
  var day = now.getDate();
  if(day<10) day = "0" + day;
  if(month<10) month= "0" + month;
  if(year<1000) year+=1900;
  return day+'.'+month+'.'+year;
}

function jetzt(sec)
{
  var today = new Date();
  var hour = today.getHours();
  var minute = today.getMinutes();
  var second = today.getSeconds();
  if(hour<10) hour= "0" + hour;
  if(minute<10) minute="0" + minute;
  if(second<10) second="0" + second;
  if (sec)
    return hour+':'+minute+':'+second;
  else
    return hour+':'+minute;
}

function calc_endtime(f) //rechnet x minuten (feld duration) auf datum in starttime
{
	var dtstr = f.starttime.value;
	if (dtstr.match(/^\d\d\.\d\d\.\d\d\d\d \d\d:\d\d$/))
	{
		var dt = dtstr.split(" ");//datum und zeit trennen
		var d=dt[0].split(".");
		var t=dt[1].split(":");
		var ts  = new Date(d[2], d[1]-1, d[0]);
		//alert(t[0]+'h'+t[1]+'+'+f.duration.value);
		ts.setHours(t[0],parseInt(t[1])+parseInt(f.duration.value));
		var endtime = ("0" + ts.getDate()).slice(-2) + "." + ("0"+(ts.getMonth()+1)).slice(-2) + "." +
			ts.getFullYear() + " " + ("0" + ts.getHours()).slice(-2) + ":" + ("0" + ts.getMinutes()).slice(-2);
		f.endtime.value=endtime;
	}else alert(dtstr+' hat falsches Format!');
}
</code></hidden>
==== label-Text ====
<hidden><code javascript>
function GetLabelText(cb_id)
{
  var t="";
  var labels=document.getElementsByTagName('label');
  for (var i = 0; i < labels.length; i++)
  {
    if (labels[i].htmlFor==cb_id)
      t=labels[i].innerHTML;
    //alert(labels[i].title);
  }
  return t;
}

function SetLabelText(cb_id,txt)
{
  var labels=document.getElementsByTagName('label');
  for (var i = 0; i < labels.length; i++)
  {
    if (labels[i].htmlFor==cb_id)
      labels[i].innerHTML=txt;
    //alert(labels[i].title);
  }
}
</code></hidden>

==== label zu Input finden ====

https://stackoverflow.com/a/285608

==== Abmessungen/Position ====
<hidden><code javascript>
function GetRect (o)
{
  var r = { top:0, left:0, width:0, height:0 };

  if(!o) return r;
  else if(typeof o == 'string' ) o = document.getElementById(o);
  if( typeof o != 'object' ) return r;

  if(typeof o.offsetTop != 'undefined')
  {
    r.height = o.offsetHeight;
    r.width = o.offsetWidth;
    r.left = r.top = 0;

    while (o)
    {
      r.top  += parseInt( o.offsetTop );
      r.left += parseInt( o.offsetLeft );
      o = o.offsetParent;
    }
  }
  return r;
}

function SetRect(e,l,t,w,h)
{
  //alert('[SetRect] '+l+' '+t+' '+w+' '+h);
  if(typeof e == 'string' ) e = document.getElementById(e);
  if (typeof e == 'object')
  {
    e.style.left=l+'px';
    e.style.top=t+'px';
    if (w>0) e.style.width=w+'px';
    if (h>0) e.style.height=h+'px';
  } else alert('[SetRect] e not found!\n'+typeof e);
}

function SetHeight(e,v)
{
  if(typeof e == 'string' ) e = document.getElementById(e);
  if (typeof e == 'object')
  {
    e.style.height=v+'px';
  } else alert('[SetHeight] e not found!\n'+typeof e);
}

function SetWidth(e,v)
{
  if(typeof e == 'string' ) e = document.getElementById(e);
  if (typeof e == 'object')
  {
    e.style.width=v+'px';
  } else alert('[SetWidth] e not found!\n'+typeof e);
}
</code></hidden>
==== AJAX ====
<hidden><code javascript>
var loading_html='<img src="images/loading.gif">';

function setInnerText(divID, text)
{
  if (divID)
  {
    var el = (document.getElementById) ? document.getElementById(divID) : document.all[divID];
    if(el) { el.innerHTML = text; }else alert('[AJAX] div "'+divID+'" not found');
  }
}

// create Object
function GetHttpRequest()
{
  if (window.XMLHttpRequest) 
    return new XMLHttpRequest();// Mozilla, Safari, Opera, IE>=7
  else if (window.ActiveXObject)
  {
    try 
    {
      return new ActiveXObject('Msxml2.XMLHTTP'); // IE 5
    } catch (e) 
    {
      try 
      {
        return new ActiveXObject('Microsoft.XMLHTTP'); // IE 6
      } catch (e) {}
    }
  }else 
  {
    alert("Your browser does not support AJAX.");
  }
  return null;
}

function request_get(xmlHttp,serverscript,params)
{
  if(xmlHttp)
  {
    xmlHttp.open("GET", serverscript+'?'+params, true);
    xmlHttp.send(null);
  }else alert('HttpRequest wurde nicht erstellt!');
}
function request_post(xmlHttp,serverscript,params)
{
  if(xmlHttp)
  {
    xmlHttp.open("POST", serverscript, true);

    //Send the proper header information along with the request
    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlHttp.setRequestHeader("Content-length", params.length);
    xmlHttp.setRequestHeader("Connection", "close");
    xmlHttp.send(params);
  }else alert('HttpRequest wurde nicht erstellt!');
}

function ajax_request(divID, url, params,callback) 
{
  var xmlHttp = GetHttpRequest();
  if (xmlHttp)
  {
    if(callback == undefined) //if callback defined no loading-image
	setInnerText(divID,loading_html);
	xmlHttp.onreadystatechange = function()
	{
	  if(xmlHttp.readyState == 4) 
	  {
		if(callback != undefined && typeof callback == 'function')
			callback(divID, xmlHttp.responseText);
		else
			setInnerText(divID, xmlHttp.responseText);
	  }
	}
      request_post(xmlHttp,url,params);
  }
  return false;
}
</code></hidden>

==== json-parsing ====
<hidden><code javascript>
function applyState(div,data)
{
	if(data) {
		try {
			obj = JSON.parse(data);
		} catch(e) {
			alert(e);
		}
	}
	if (obj)
	{
		console.log(obj);
		if (obj.hasOwnProperty('checks'))
		{
			for (var key in obj.checks) {
				console.log(key + " -> " + obj.checks[key].state);
			}
		}
		if (obj.hasOwnProperty('trails'))
		{
			for (var key in obj.trails) {
				console.log(key + " -> " + obj.trails[key].working);
			}
		}
	}
	setInnerText(div, '<pre>[applyState_'+jetzt(true)+']\n'+data+'</pre>');
}
</code></hidden>

==== ein/ausblenden ====
<hidden><code javascript>
function ShowDivTag(e,show)
{
  if (e)
  {
    if (show=='toggle') show=(e.style.display=='none');
    if (show)
      e.style.display='';
    else
      e.style.display='none';
  }
}

function ShowDiv(id,show)
{
  var e=document.getElementById (id);
  ShowDivTag(e,show);
}
</code></hidden>
==== Radiobutton/Checkbox ====
<hidden><code javascript>
function GetRadioValue(radioname)
{
  //alert(radioname);
  if (radioname)
  {
    if(radioname.length==undefined)//wenn nur ein radio-button existiert
    {
      if(radioname.checked==true)
        return radioname.value;
    }else
    {
      for(var i=0; i<radioname.length; i++)
      {
        if(radioname[i].checked == true)
            return radioname[i].value;
      }
    }
  }else alert('radiobutton nicht gefunden!');
  
  return -1;//if nothing found
}

function SetRadioValue(radioname,val)
{
  //alert(radioname);
  if (radioname)
  {
    if(radioname.length==undefined)//wenn nur ein radio-button existiert
    {
      if(radioname.value==val)
      {
        radioname.checked=true;
        return true;
      }
    }else
    {
      for(var i=0; i<radioname.length; i++)
      {
        if(radioname[i].value==val)
        {
	  radioname[i].checked=true;
	  return true;
	}
      }
    }
  }else alert('radiobutton nicht gefunden!');
  
  return false;//if nothing found
}

function GetCheckboxValues(chk_name,sep)
{
  //var s=GetCheckboxValues('chk[]',',');
  var sOut = "";
  if (!sep) sep=',';
  var cb = document.getElementsByName(chk_name);
  if (cb!=null)
  {
    for(var i=0;i<cb.length;i++)
    {
      if (cb[i].checked==true)
      {
        if (sOut!="") sOut+=sep;
        sOut += cb[i].value;
      }
    }
  }
  return sOut;
}
</code></hidden>
==== Class-Manipulation (css) ====
<hidden><code javascript>
function addClass (element, className) {
    if (!hasClass(element, className)) {
        if (element.className) {
            element.className += " " + className;
        } else {
            element.className = className;
        }
    }
}

function removeClass (element, className) {
var regexp = addClass[className];
    if (!regexp) {
        regexp = addClass[className] = new RegExp("(^|\\s)" + className + "(\\s|$)");
    }
    element.className = element.className.replace(regexp, "$2");
}

function hasClass (element, className) {
    var regexp = addClass[className];
    if (!regexp) {
        regexp = addClass[className] = new RegExp("(^|\\s)" + className + "(\\s|$)");
    }
    return regexp.test(element.className);
}

function toggleClass (element, className) {
    if (hasClass(element,className)) {
        removeClass(element,className);
    } else {
        addClass(element,className);
    }
}
</code></hidden>

==== Zufallsfarbe ====
<hidden><code javascript>
function get_random_color()
{
  return '#' + (Math.floor(Math.random() * 2 ** 24)).toString(16).padStart(0, 6);
}

function randomColor()
{
     color='rgb('+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+')';

     return color;
}
</code></hidden>

==== Elemente hinzufügen ====
<hidden><code javascript>
function myclick(e){alert('click '+e.id+' img-src:'+e.src);}

function createnode()
{
	var e=document.getElementById('icons');
	if (e)
	{
		var node=document.createElement("div");
		node.style.height='16px';
		node.style.width='16px';
		node.style.border = "1px solid #000000";
		node.style.display = "inline-block";
		node.style.backgroundColor=randomColor();
		node.title='hint '+node.style.backgroundColor;
		e.appendChild(node);
		//second node, an img
		var node2=document.createElement("img");
		node2.id='img_'+Math.round(Math.random()*255);
		if (Math.random()*2 > 1)
		{
			node2.src='burger.png';
		}else{
			node2.src='coffee.png';		
		}
		node2.setAttribute('onclick', 'myclick(this);');
		e.appendChild(node2);
	}
}
</code>

<code html>
<button onclick="createnode();">add child</button>
<button onclick="var e=document.getElementById('icons');if (e) e.innerHTML='';">delete all childs</button>
<div id="icons" style="max-width:200px"></div>
</code></hidden>