JavaScript

Der als ECMAScript (ECMA 262) standardisierte Sprachkern von JavaScript (JS) beschreibt eine dynamisch typisierte, objektorientierte, aber klassenlose Skriptsprache. Mit JavaScript lässt sich objektorientiert, prozedural und auch funktional programmieren.

document.getElementById("id")


<div id="testConsoleById" class="testConsole" style="clear: both;"></div>	
<div id="container" style="clear: both;">
	<div class="testContainer" onclick="getNumber(this)">0</div>
	<div class="testContainer" onclick="getNumber(this)">1</div>
	<div class="testContainer" onclick="getNumber(this)">2</div>
	<div class="testContainer" onclick="getNumber(this)">3</div>
</div>
<script type="text/javascript">
function getNumber(pThis) {
	document.getElementById('testConsoleById').innerHTML = pThis.innerHTML;
}
</script>	
	
0
1
2
3


document.getElementsByName("name")


<p style="clear: both;">
	<input type="checkbox" name="Artikel" value="Apfel" />Apfel
	<input type="checkbox" name="Artikel" value="Birne" />Birne
	<input type="checkbox" name="Artikel" value="Pflaume" />Pflaume	
</p>
<button id="testeeByName" class="button"><span>Test</span></button>
<script type="text/javascript">
var index = 0;
var flag = false;

document.getElementById('testeeByName').addEventListener("click", function() {
	if (flag)
		document.getElementsByName("Artikel")[index++].checked = false;
	else
		document.getElementsByName("Artikel")[index++].checked = true;
	
	if (index > 2) {
		index = 0;
		
		if (flag)
			flag = false;
		else
			flag = true;
	}
});
</script>		
	

Apfel Birne Pflaume


document.getElementsByTagName("TagName")


<p>Apfel</p>
<p>Birne</p>
<p>Pflaume</p>
<p>Johannisbeere</p>
<br /><br />
<button id="testByTagName" class="button"><span>Test</span></button>
	
<script type="text/javascript">
var flagWeight = true;

document.getElementById('testByTagName').addEventListener("click", function() {
	var len = document.getElementsByTagName("p").length;
	flagWeight = flagWeight ? false : true;
	
	for (var i = 0; i < len; i++) {
		if (flagWeight) 
			document.getElementsByTagName("p")[i].style.fontWeight = 'normal';
		else 
			document.getElementsByTagName("p")[i].style.fontWeight = 'bold';
	}
});
</script>
	




document.getElementsByClassName("ClassName") - Inklusive IE6, IE7 und IE8


<p class="Obst">Apfel</p>
<p class="Obst">Birne</p>
<p class="Obst">Pflaume</p>
<p class="Obst">Johannisbeere</p>
<br /><br />
<button id="testByClassName" class="button" onclick="testClassByName();"><span>Test</span></button>
	
<script type="text/javascript">
if (! document.getElementsByClassName) {
	document.getElementsByClassName = function(search) {
    var doc = document, elements, pattern, i, results = [];
    
     // IE8
    if (doc.querySelectorAll) {
      return doc.querySelectorAll("." + search);
    }
    
    // IE6, IE7
    if (doc.evaluate) { 
      pattern = ".//*[contains(concat(' ', @class, ' '), ' " + search + " ')]";
      elements = doc.evaluate(pattern, doc, null, 0, null);
      
      while ((i = elements.iterateNext())) {
        results.push(i);
      }
    } else {
      elements = doc.getElementsByTagName("*");
      pattern = new RegExp("(^|\\s)" + search + "(\\s|$)");
      
      for (i = 0; i < elements.length; i++) {
        if ( pattern.test(elements[i].className) ) {
          results.push(elements[i]);
        }
      }
    }
    
    return results;
  }
}

var flagWeight = true;

function testClassByName() {
	var len = document.getElementsByClassName("Obst").length;
	flagWeight = flagWeight ? false : true;
	
	for (var i = 0; i < len; i++) {
		if (flagWeight) 
			document.getElementsByClassName("Obst")[i].style.fontWeight = 'normal';
		else 
			document.getElementsByClassName("Obst")[i].style.fontWeight = 'bold';
	}	
}
</script>	
	




removeClass(...), addClass(...) - alte IEs (Browser CrossOver)


<style type="text/css">
.strongDummy { 
	font-size: 26px;
	font-weight: bold;	
}
.smallDummy { 
	font-size: 12px;
	font-weight: normal;	
}
</style>

<div style="height: 50px;">
	<span id="Dummy" class="strongDummy">Hallo Welt</span>
</div>
<input type="button" onclick="swapClass()" value="Test">

<script type="text/javascript">
function hasClass(elm, cssClass) {
	return !! elm.className.match(new RegExp('(\\s|^)'+ cssClass + '(\\s|$)'));
}

function addClass(elmId, cssClass) {
	var elm = document.getElementById(elmId);
	
	if (! hasClass(elm, cssClass)) 
		elm.className += " " + cssClass;
}

function removeClass(elmId, cssClass) {
	var elm = document.getElementById(elmId);
	
	if (hasClass(elm, cssClass)) {
		var reg = new RegExp('(\\s|^)' + cssClass + '(\\s|$)');
		elm.className = elm.className.replace(reg, ' ');
	}
}

var swap = false;

function swapClass() {
	if (swap) {
		swap = false;
		removeClass('Dummy', 'smallDummy');
		addClass('Dummy', 'strongDummy');			
	} else {
		swap = true;
		removeClass('Dummy', 'strongDummy');
		addClass('Dummy', 'smallDummy');		
	}
}
</script>
	




Date


<div id="testConsoleDate" class="testConsole" style="clear: both; height: 170px; text-align: left; white-space: pre;"></div>

<script type="text/javascript">
var days = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag");	
var month = new Array("Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");	
var now = new Date();

document.getElementById('testConsoleDate').innerHTML = 
	'\nTag: \t\t\t' + now.getDate() +
	'\nWochentag: \t' + days[now.getDay()] +
	'\nMonat:   \t\t' + month[now.getMonth() - 1] +
	'\nJahr:   \t\t' + now.getFullYear() +
	'\nStunde:  \t\t' + now.getHours() +
	'\nMinuten: \t\t' + now.getMinutes() +
	'\nSekunden: \t' + now.getSeconds() +
	'\nMillisekunden: ' + now.getMilliseconds() + 
	'\nTime:    \t\t' + now.getTime() + '\n';
</script>		
	


function showInfoBox(...) - autoClose, disabledAutoClose


<p style="clear: both;">
<button id="testShowTooltip" class="button" 
 onclick="showInfoBox(this, '<b>Definition von Rekursion:</b><br /><i>siehe Definition von Rekursion!</i>', 220, null);"><span>Test</span></button>
</p>

<script type="text/javascript">
function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
	
function showInfoBox(pThis, message, width, disabledAutoClose) {
	var posX = _posX(pThis) - 10; 
	var posY = _posY(pThis) + 26; 
	
	this.clickHide = disabledAutoClose == null || disabledAutoClose == undefined ? false : disabledAutoClose === true ? true : false;	
	var cssPane = 'position: absolute; left: ' + posX + 'px; top: ' + posY +'px; zIndex: 50; ' + 
		'background: transparent; float: left;' + (width == null ? '' :' width: ' + width + 'px;');
  	var cssContent = 'background: #FFFFE0; color: black; color: gray; border: 1px solid gray; ' +
		'border-top-color: #6D6D6D; border-top-width: 2px; border-left-color: #6D6D6D; border-left-width: 2px;' +
		'font-size: 11px; padding: 6px 6px 6px 6px; border-radius: 6px 6px 6px 6px;' +
		'text-align: left; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;';
	var cssClose = 'cursor: pointer; text-align: center; vertical-align: middle; padding-left: 10px; ' +
		'font-size: 11px; font-weigth: bold; width: 14px; heigth: 14px; float: right;';
	var pane = '<div id="InfoBoxPane" style="' + cssPane + '" onclick="clickHide = true;">' +
		'<div style="' + cssContent + '" onclick="clickHide = true;">' + 
		'<div style="' + cssClose + '" onclick="clickHide = true; infoBoxHide(1);" title="Schlie\u00DFen">x</div>' +
		message + '</div></div>';
	var rootNode = document.createElement('div');
	
	rootNode.innerHTML = pane;
	insertAfter(rootNode, document.getElementById(pThis.id));
	
	if (! this.clickHide)
		window.setTimeout('infoBoxHide(2)', 5000);

	this.infoBoxHide = function (ownerNumber) {
		if (clickHide && ownerNumber == 2)
			return;
		
		var elm = document.getElementById('InfoBoxPane');
		
		if (elm != null)
		 	elm.parentNode.removeChild(elm)		
	}
	
	function _posX(pThis) {
		var flag = true;
		var result = 0;
		
		if(pThis.offsetParent) {
			while(flag) {
				result = result + pThis.offsetLeft;
				
				if(! pThis.offsetParent)
					flag = false;
				
				pThis = pThis.offsetParent;
			}
		} else if(pThis.x) {
		    result = result + pThis.x;
		}
		
		return result;
	}
	
	function _posY(pThis) {
		var flag = true;
		var result = 0;
		
		if(pThis.offsetParent) {
			while(flag) {
				result = result + pThis.offsetTop;
				
				if(! pThis.offsetParent)
					flag = false;
				
				pThis = pThis.offsetParent;
			}
		} else if(pThis.y) {
		    result = result + pThis.y;
		}
		
		return result;
	}
	
}
</script>	
	






Top


Example
Sitemap Kontakt Impressum