ReLast - Klassik

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 © 2024

Datenschutz | Impressum