... just another site around the web ...





Möge eine Gesellschaft, die sich einzig auf die Macht des Geldes stützt, erzittern, wenn sie die Ohnmacht der Justiz gegenüber den Verflechtungen eines Systems erkennt, das den Erfolg, der alle Mittel heiligt, zum Gott erhebt.
- Honore de Balzac

JavaScript


Allgemein

Hallo Welt

<html>
	<head></head>
	<body>
		<script>
			alert("Hallo Welt!");
		</script>
	</body>
</html>

Einbinden

als Referenz

<head>
	...
	<script src="datei.js" type="text/javascript"></script>
	...
<head>

im HTML-Body

<body>
	...
	<script> 
	... 
	</script>
	...
</body>

an HTML-Elementen

<input type="text" class="form-control" id="eingabe" onkeyup="document.getElementById('ausgabe').value = quersumme(document.getElementById('eingabe').value)">
<input type="text" class="form-control" id="ausgabe" readonly>

Kommentare

Kommentare einzeilig

// ...

Kommentare mehrzeilig

/* ... */

Datentypen

var zahl = 1; // integer
var text = "fubar"; // string, kann auch wie ein Array durchlaufen werden
var datum = new Date(j,m,t); // Datum
var dict = { vorname:"Max", nachname:"Mustermann", alter:45 }; // Dictionary
dict["vorname"] = "doch nicht max"; //Zugriff, geht auch mit: 
dict.vorname = "doch nicht max";

Funktionen

function greet (name) {
	alert("Hello " + name);
}

Mit Default-Parameter

function greet (name = "Jon Doe") {
	alert("Hello " + name);
}

Kontrollstrukturen

Iteration über einen String

function do_nothing(eingabe) // liefert exakt die Eingabe zurück
{
	result = "";
	for (var i = 0, len = eingabe.length; i < len; i++) {
        result += eingabe[i];
    }
	return result;
}

Iteration über ein Dictionary

function do_nothing(dict) // liefert exakt die Eingabe zurück
{
	for(var key in dict) {
		dict[key] = dict[key];
	}
	return dict;
}

Fallunterscheidung

if(text == "fubar") {
	alert("fubar");
}
else {
	alert("kein fubar");
}
// alternative Kurzform
(text == "fubar") ? alert("fubar") : alert("kein fubar");

Objekte

document

document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()

Code-Beispiele

Formatierung von Datum und Zeit

Die übergebene Zeit mit führenden Nullen (HH:MM:SS)

function getFullTime(date) {
	var Stunde = date.getHours();
	Stunde = (Stunde < 10) ? "0" + Stunde : Stunde;
	var Minute = date.getMinutes();
	Minute = (Minute < 10) ? "0" + Minute : Minute;
	var Sekunde = date.getSeconds();
	Sekunde = (Sekunde < 10) ? "0" + Sekunde : Sekunde;
	return Stunde + ":" + Minute + ":" + Sekunde;
}

Das übergebene Datum mit führenden Nullen (TT.MM.YYYY)

function getFullDate(date) {
	var Tag = date.getDate(); 
	Tag = (Tag < 10) ? "0" + Tag : Tag;
	var Monat = date.getMonth()+1;
	Monat = (Monat < 10) ? "0" + Monat : Monat;
	var Jahr = date.getFullYear();
	return Tag + "." + Monat + "." + Jahr;
}

Das übergebene Datum in hierarchischer Form (YYYYMMTT)

function getHierarchicDate(date) {
	var Tag = date.getDate(); 
	Tag = (Tag < 10) ? "0" + Tag : Tag;
	var Monat = date.getMonth()+1;
	Monat = (Monat < 10) ? "0" + Monat : Monat;
	var Jahr = date.getFullYear();
	return Jahr + Monat + Tag;
}

Quersumme in JavaScript

function quersumme(zahl) {
	var tmp = zahl.toString().split('');
	var quer = 0;
	for (var i=0; i < tmp.length; i++) {
		quer += Number(tmp[i]);
	}
	return quer;
}

Quersumme erweitert um einen Maximalwert

function quersumme_max(zahl, max) {
    while (zahl > max) {
    	zahl = quersumme(zahl);
    }
    return zahl;
}

Swap-Funktion zum Tausch von Key/Value im Dictionary

function swap(dict) {
	var ret = {};
	for(var key in dict){
		ret[dict[key]] = key;
	}
	return ret;
}
var dict = { 1: "eins", 2: "zwei"};
var swaped_dict = swap(dict);

ergibt swaped_dict = { "eins": 1, "zwei": 2 }

Tastatur-Events

Kurzform

function getKey(event) {
    tasten_code = event.keyCode;
    tasten_zeichen = String.fromCharCode(tasten_code);
    //alert(tasten_code);
    //alert(tasten_zeichen);
}
document.onkeyup = getKey;

Langform

function getKey(event) {
    if (!event) event = window.event;
    if (event.which) tasten_code = event.which;
    else if (event.keyCode) tasten_code = event.keyCode;
    tasten_zeichen = String.fromCharCode(tasten_code);
    //alert(tasten_code);
    //alert(tasten_zeichen);
}
document.onkeyup = getKey;

Tastatur-Events mit vordefinierten Funktionen, zum Beispiel Navigation per JavaScript

var key = new Array();
key['r'] = "http://www.relast.de";
key['g'] = "http://www.google.de";
function getKey(tasten_event) {
    if (!event) event = window.event;
    if (event.which) tasten_code = event.which;
    else if (event.keyCode) tasten_code = event.keyCode;
    tasten_zeichen = String.fromCharCode(tasten_code);
    for (var i in key) 
        if (tasten_zeichen == i) 
            window.open(key[i],"_blanc");
}
document.onkeypress = getKey;
document.onkeydown = getKey;
document.onkeyup = getKey;

Maus-Position

function mousePosition(event) {
	var posX = 0;
	var posY = 0;
	if (!event) var e = window.event;
	if (event.pageX || event.pageY) 	{
		posX = event.pageX;
		posY = event.pageY;
	}
	else if (event.clientX || event.clientY) 	{
		posX = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
		posY = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
	}
	alert(posX + " x " + posY);
}
document.onclick = mousePosition;

MouseOver-Event

<img src="bild_normal.jpg" width="" height="" alt="" name="bild" onmouseover="bild.src='bild_hover.jpg';" onmouseout="bild.src='bild_normal.jpg';">

Drucken

<a href="javascript:window.print()">Diese Seite drucken</a>

Eingabeaufforderung

Parameter:

  1. Aufforderungstext
  2. Feldvorbelegung (leer mit "").
Eingabe = prompt("Geben Sie meinen Namen ein:", "");
if (Eingabe != "Rumpelstielzchen") {
    alert("Ach wie gut das niemand weiss ...");
    history.back();
} else {
    alert("Damn!");
}








Copyright © 2018

Datenschutz | Impressum