Wikizone - Benutzerbeiträge [de]

JavaScript - Page Transitions

2017-03-01T08:26:25Z

93.208.111.215: /* Inhalte dynamisch nachladen mit AJAX */

== Tools und Links ==
* http://git.blivesta.com/animsition/
* http://designdrizzle.com/15-amazing-page-transitions-effects-tutorials-in-jquery-and-css3/
* https://webdesign.tutsplus.com/tutorials/how-to-create-an-ajax-driven-theme-for-processwire--cms-26579
https://tympanus.net/Development/FullscreenLayoutPageTransitions/

== Tutorials ==

== Quickstart ==
=== AJAX Strategie ===
* 2 verschachtelte Container
* Der äußere beinhaltet alle Inhalte. An den inneren werden die neuen Inhalte angehängt (append)
* Page Transition wird ausgeführt und der innere Container mit den alten Inhalten ausgeblendet.
* Evtl. Browser History aktualisieren und URL
* Evtl. Seitenskripte neu initialisieren

== Inhalte dynamisch nachladen mit AJAX ==
=== Seitenrequest auslösen ===
'''jQuery'''
<syntaxhighlight lang="php">
$(function() {
var href;
var title;

$('body').on('click','a.ajax-link',function(e) { // nav link clicked
href = $(this).attr("href");
title = $(this).attr("name");

// load content via AJAX
loadContent(href);

// prevent click and reload
e.preventDefault();
});

function loadContent(url){ // Load content

// variable for page data
$pageData = '';

// send Ajax request
$.ajax({
type: "POST",
url: url,
data: { ajax: true },
success: function(data,status){
$pageData = data;
}
}).done(function(){ // when finished and successful

// construct new content
$pageData = '<div class="content no-opacity ajax">' + $pageData + '</div>';

// add content to page
$('.content-container').append($pageData);

// remove old content
$('.content.current-content').remove();

// show new content and clean up classes
$(this).removeClass('no-opacity').removeClass('ajax').addClass('current-content');

}); // end of ajax().done()
} // end of loadContent()
});
</syntaxhighlight>

JavaScript - Page Transitions

2017-03-01T08:26:06Z

93.208.111.215:

== Tools und Links ==
* http://git.blivesta.com/animsition/
* http://designdrizzle.com/15-amazing-page-transitions-effects-tutorials-in-jquery-and-css3/
* https://webdesign.tutsplus.com/tutorials/how-to-create-an-ajax-driven-theme-for-processwire--cms-26579
https://tympanus.net/Development/FullscreenLayoutPageTransitions/

== Tutorials ==

== Quickstart ==
=== AJAX Strategie ===
* 2 verschachtelte Container
* Der äußere beinhaltet alle Inhalte. An den inneren werden die neuen Inhalte angehängt (append)
* Page Transition wird ausgeführt und der innere Container mit den alten Inhalten ausgeblendet.
* Evtl. Browser History aktualisieren und URL
* Evtl. Seitenskripte neu initialisieren

== Inhalte dynamisch nachladen mit AJAX ==
=== Seitenrequest auslösen ===
<syntaxhighlight lang="php">
$(function() {
var href;
var title;

$('body').on('click','a.ajax-link',function(e) { // nav link clicked
href = $(this).attr("href");
title = $(this).attr("name");

// load content via AJAX
loadContent(href);

// prevent click and reload
e.preventDefault();
});

function loadContent(url){ // Load content

// variable for page data
$pageData = '';

// send Ajax request
$.ajax({
type: "POST",
url: url,
data: { ajax: true },
success: function(data,status){
$pageData = data;
}
}).done(function(){ // when finished and successful

// construct new content
$pageData = '<div class="content no-opacity ajax">' + $pageData + '</div>';

// add content to page
$('.content-container').append($pageData);

// remove old content
$('.content.current-content').remove();

// show new content and clean up classes
$(this).removeClass('no-opacity').removeClass('ajax').addClass('current-content');

}); // end of ajax().done()
} // end of loadContent()
});
</syntaxhighlight>

JavaScript - Page Transitions

2017-03-01T08:21:58Z

93.208.111.215: /* Quickstart */

JavaScript - Page Transitions

2017-03-01T08:19:03Z

93.208.111.215: /* Quickstart */

JavaScript - Page Transitions

2017-03-01T08:14:23Z

93.208.111.215:

JavaScript - Page Transitions

2017-03-01T08:10:22Z

93.208.111.215: /* Tools */

== Tools und Links ==
* http://git.blivesta.com/animsition/
* http://designdrizzle.com/15-amazing-page-transitions-effects-tutorials-in-jquery-and-css3/

== Tutorials ==

== Quickstart ==

== Inhalte dynamisch nachladen mit AJAX ==

JavaScript - Page Transitions

2017-03-01T08:09:47Z

93.208.111.215: Die Seite wurde neu angelegt: „== Tools == == Tutorials == == Quickstart == == Inhalte dynamisch nachladen mit AJAX ==“

== Tools ==

== Tutorials ==

== Quickstart ==

== Inhalte dynamisch nachladen mit AJAX ==

Javascript

2017-03-01T08:08:10Z

93.208.111.215: /* Visualisierung und Visual FX */

== Links ==
http://onlinetools.org/ Freie Skripte von Christian Heilmann - gut programmiert

http://wiki.selfhtml.org/wiki/Startseite

== JavaScript Basics ==
[[JavaScript - Gültigkeit von Variablen (Scope)]]

[[JavaScript - Arbeiten mit Objekten]]

[[JavaScript - Skript-Organisation mit Modulen]]

== JavaScript Frameworks ==
Inzwischen gibt es sehr viele gute Frameworks. Auch in diesem Wiki sind noch einige die nicht unbedingt hier verlinkt sind.

[[jQuery]]

[[jQTouch]]

jQuery mobile - meine Empfehlung

Sencha (mobil)

=== Frameworks über CDN (Content Delivery Networks) ===
https://developers.google.com/speed/libraries/

== JavaScript - nützliche Tools ==
=== Helfer ===
* History.js - Browser History für dynamisch nachgeladene Inhalte
* url() - URL Parser - https://github.com/websanova/js-url
* jQuery++ - http://jquerypp.com/
* http://modernizr.com/ - CSS und JS Feature Detection für Browser.

=== Visualisierung und Visual FX ===
* jQuery Masonry (Dynamisches Kachellayout) - http://masonry.desandro.com/
* Page Visibility API (Animationen Pausieren wenn die Seite nicht sichtbar ist) - http://www.html5rocks.com/en/tutorials/pagevisibility/intro/
==== Page Transitions ====
[[JavaScript - Page Transitions]]

[[JSON]] Datenstrukturen

JavaScript - Strings: http://www.mediaevent.de/javascript/Javascript-Strings.html

[[JavaScript - Zahlen formatieren]]

===JavaScript - Minify, Obfuscation, Beautify===
[[JavaScript - Minify, Obfuscation, Beautify]]

=== JavaScript - Datatables ===
[[JavaScript - Datatables]]

=== JavaScript - Silbentrennung / Hyphenation ===
https://github.com/mnater/hyphenator

== JQuery Plugins ==

[[JQuery Tools (flowplayer.org)]]

[[jQuery.Scrolly]] (Parallax)

== JavaScript - Snippets ==
=== Tipps, Tricks und Snippets ===
[[JavaScript - Snippets]]

[[JavaScript - Probleme lösen]]

== JavaScript - Events / Ereignisse ==
[[JavaScript - Event-Handler]]

== JavaScript - Debugging ==
[[JavaScript - Probleme im IE]]

Javascript

2017-03-01T08:07:23Z

93.208.111.215: /* JavaScript - nützliches */

== Links ==
http://onlinetools.org/ Freie Skripte von Christian Heilmann - gut programmiert

http://wiki.selfhtml.org/wiki/Startseite

== JavaScript Basics ==
[[JavaScript - Gültigkeit von Variablen (Scope)]]

[[JavaScript - Arbeiten mit Objekten]]

[[JavaScript - Skript-Organisation mit Modulen]]

== JavaScript Frameworks ==
Inzwischen gibt es sehr viele gute Frameworks. Auch in diesem Wiki sind noch einige die nicht unbedingt hier verlinkt sind.

[[jQuery]]

[[jQTouch]]

jQuery mobile - meine Empfehlung

Sencha (mobil)

=== Frameworks über CDN (Content Delivery Networks) ===
https://developers.google.com/speed/libraries/

== JavaScript - nützliche Tools ==
=== Helfer ===
* History.js - Browser History für dynamisch nachgeladene Inhalte
* url() - URL Parser - https://github.com/websanova/js-url
* jQuery++ - http://jquerypp.com/
* http://modernizr.com/ - CSS und JS Feature Detection für Browser.

=== Visualisierung und Visual FX ===
* jQuery Masonry (Dynamisches Kachellayout) - http://masonry.desandro.com/
* Page Visibility API (Animationen Pausieren wenn die Seite nicht sichtbar ist) - http://www.html5rocks.com/en/tutorials/pagevisibility/intro/
* JavaScript - Page Transitions

[[JSON]] Datenstrukturen

JavaScript - Strings: http://www.mediaevent.de/javascript/Javascript-Strings.html

[[JavaScript - Zahlen formatieren]]
===JavaScript - Minify, Obfuscation, Beautify===
[[JavaScript - Minify, Obfuscation, Beautify]]

=== JavaScript - Datatables ===
[[JavaScript - Datatables]]

=== JavaScript - Silbentrennung / Hyphenation ===
https://github.com/mnater/hyphenator

== JQuery Plugins ==

[[JQuery Tools (flowplayer.org)]]

[[jQuery.Scrolly]] (Parallax)

== JavaScript - Snippets ==
=== Tipps, Tricks und Snippets ===
[[JavaScript - Snippets]]

[[JavaScript - Probleme lösen]]

== JavaScript - Events / Ereignisse ==
[[JavaScript - Event-Handler]]

== JavaScript - Debugging ==
[[JavaScript - Probleme im IE]]

JavaScript - Snippets

2017-02-28T18:20:40Z

93.208.111.215: /* Scroll / Fixed Navbar */

== Links ==
Siehe auch

[[JavaScripts - Basics]]

[[jQuery - Snippets]]

== Sonderzeichen in Alert-Meldungen ==

Oft sieht man im Web sehr hässliche alert-Meldungen , in denen die Umlaute nicht korrekt dargestellt sind. Das liegt auch daran, dass unterschiedliche Betriebssystem Zeichen unterschiedlich kodieren. Damit so etwas möglichst vermieden wird, sollte man solche Meldungen mit alert(unescape("...")) anzeigen.

Beispiel:
alert(unescape("So was d%E4mliches%21"));

Zeichen so verschlüsseln:
\ \\
" \"
' \'
Zeilenumbruch \n
Wagenrücklauf \r
(Den Unterschied zum Zeilenumbruch habe ich auch noch nicht begriffen.)
Tabulator \t

Zeichen so:
Ä %C4
Ö %D6
Ü %DC
ä %E4
ö %F6
ü %FC
ß %DF
€ %u20AC
$ %24
% %25

Generier Tool:
http://www.salesianer.de/util/alert-umlaute.html

== Teil einer Seite drucken ==
Old School JavaScript, sollte sich aber relativ einfach auf jQuery übertragen lassen.

Quelle: http://www.webstool.de/de/tipps_down_druck3.html Zugriff: 10/2011

Mit einem einfachen JavaScript lässt sich mit relativ wenig Aufwand eine druckerfreundliche Version einer Webseite bei Bedarf erzeugen.

Das JavaScript wird nachstehend vorgestellt:

<pre>
function ausgabe()
{
var ref = document.getElementById("auswahl");
var ausgabe;
// nächste Zeile öffnet ein Fenster der Größe 800 x 600 Pixel
ausgabe=window.open("#","fenster","width=800,height=600,resizable=yes,menubar=yes,left=50,top=50");
ausgabe.document.open();
ausgabe.document.write('<html>\n<head>\n<title>Druckversion</title>\n');
ausgabe.document.write('<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">\n');
// in der nächsten Zeile an das eigene Stylesheet anpassen
ausgabe.document.write('<link rel="stylesheet" href="../css/design1.css">\n</head>\n');
ausgabe.document.write('<body>\n<h1 align="center">© web s tool - Partner für Ihren Internetauftritt</h1>\n');
ausgabe.document.write('<div>\n');
// Ausgabe aller Inhalte mit der id = auswahl
while (ref!=null)
{
ausgabe.document.write(ref.innerHTML + '\n');
ref = ref.nextSibling;
}
ausgabe.document.write('</div>\n<p align="center"><a href="javascript:window.print()">drucken</a></p>\n</body>\n</html>\n');
ausgabe.document.close();
ausgabe.focus();
}
</pre>
Die externe Einbindung des JavaScripts erfolgt dabei z.B. im head-Bereich der Webseite über

<script language="JavaScript" src="../scripts/ausgabe4print.js"></script> .

Von entscheidender Bedeutung ist, dass auf der Seite das auszuwählende Objekt mit der id = "auswahl" (bitte bei Bedarf anpassen) versehen ist. Das auszuwählende Objekt kann dabei eine Tabelle oder ein div-Container sein.

Der Aufruf erfolgt z.B. durch den Link <a href="javascript:ausgabe();"> Druckversion</a>

== Fehler Behandlung ==
=== Prüfen ob ein Element existiert (normales JavaScript)===
<pre>
function isElement(obj) {
try {
//Using W3 DOM2 (works for FF, Opera and Chrom)
return obj instanceof HTMLElement;
}
catch(e){
return (typeof obj==="object") &&
(obj.nodeType===1) && (typeof obj.style === "object") &&
(typeof obj.ownerDocument ==="object");
}
}
</pre>

=== Prüfen ob ein Element in einem Objekt-Literal existiert und nicht null ist ===
<pre>
var data = {
"key1" : val,
"key2" : val,
"key3" : val
}
</pre>

<pre>
if( "key2" in data && data.key2 != null){
...
}
</pre>

== Eingaben Validieren ==
=== Handynummer validieren (normales JavaScript) ===
<pre>
function phone_is_valid(nr){
var reg2 = /^([0-9]{4,6})+\/([0-9]{6,11})$/;
return reg2.test(nr);
}
</pre>

=== Datum validieren (normales JavaScript) ===
<pre>
function date_is_valid(myDate){
var isValid = false;
var today = new Date();
if (!myDate) return false;
myDate=myDate.toString();
arrDate=myDate.split(".");
if (arrDate.length!=3) return false;
arrDate[0]=parseInt(arrDate[0],10);
arrDate[1]=parseInt(arrDate[1],10)-1;
if (arrDate[2].length==2) arrDate[2]="20"+arrDate[2]
var kontrolldatum=new Date(arrDate[2],arrDate[1],arrDate[0]);
// Datum gültig ?
if (kontrolldatum.getDate()==arrDate[0] && kontrolldatum.getMonth()==arrDate[1] && kontrolldatum.getFullYear()==arrDate[2])
{
// in der Zukunft
if (kontrolldatum.getTime()-today.getTime()+(24*60*60*1000) > 0)
return true;
}
return false;
}
</pre>
== Maus ==
[[JavaScript - Maus]]
== Timer ==
Quelle: http://blog.agrafix.net/2011/10/javascript-timers-mit-jquery/

Benötigte Funktionen sind window.setTimeout und window.setInterval
<pre>
// funktion verzögert aufrufen
function machWas() {
alert('alert() mit 1000ms verzögerung!');
}
window.setTimeout(machWas, 1000);

// funktion alle X Millisekunden aufruden
function machWasOft() {
alert('alle 1000ms ein alert()');
}

window.setInterval(machWasOft, 1000);
</pre>

Doch was ist, wenn ich jetzt einen solchen Timer ändern oder abbrechen möchte? Das ist eigentlich auch nicht schwer – die Funktionen setTimeout/setInterval geben ein Objekt zurück über das sie sich wieder beenden lassen.

<pre>
var x = 0;
function machWasAbbrechbarOft() {
x += 1;
if (x > 200) {
window.clearInterval(running); // beende das "Interval" nach 201 Ausführungen
}
}
var running = window.setInterval(machWasAbbrechbarOft, 1000);

</pre>

=== Timer mit jQuery ===
Für größere Projekte gibt es ein komfortableres jQuery Plugin

Mit diesem Plugin geht das “Interval” setzen dann wie folgt:

<pre>
$(document).everyTime(1000, "machWasOftAbbrechbar", function(i) { // alle 1000ms
alert('Hallo ich bin der ' + i + 'te Aufruf!'); // machWasOftAbbrechbar, hier die funktion die aufgerufen werden soll
}, 200); // 200 mal ausführen
Der zweite Parameter, machWasOftAbbrechbar, stellt hierbei ein sogenanntes “label” dar, über das man den gestarten Timer dann wieder abbrechen kann:

$(document).stopTime("machWasOftAbbrechbar"); // stoppe machWasOftAbbrechbar
</pre>

Viel mehr gibt’s eigentlich nicht dazu zu sagen – die Dokumentation dazu findet man, genau wie das Plugin selbst, unter http://plugins.jquery.com/project/timers.

== JavaScript - Objekte ==
[[JavaScript - Objektorientierte Programmierung]]
=== Objekte löschen ===
for (prop in allOverlays) { if (allOverlays.hasOwnProperty(prop)) { delete allOverlays[prop]; } } //ie 6 gc problems
//allOverlays = {};

== JavaScript - Strings ==
[[JavaScript - Strings]]

== JavaScript - HTML5 Audio ==
[[JavaScript - HTML5 Audio]]

== JavaScript - Verschiedenes ==
=== JavaScript Animation ===
Siehe [[Animation im Web]]
=== Sortieren ===
http://www.javascriptkit.com/javatutors/arraysort.shtml
==== URL Parameter auslesen ====
<pre>
function getUrlVars()
/* get GET Vars from URl */
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
</pre>

=== Anchor Teil bei Links extrahieren ===
Manchmal möchte man nur den Anchor Teil mit #meinAnchor
var url = "www.aaa.com/task1/1.3.html#a_1";
var hash = url.substring(url.indexOf("#")+1);
=== Scrolling ===
==== Scroll / Fixed Navbar ====
jQuery
<syntaxhighlight lang="javascript">
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});

</syntaxhighlight>

CSS - wichtig vor allem fixed.
<syntaxhighlight lang="css">
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
</syntaxhighlight>

==== Smooth Scrolling für Anchor Tags oder toTop Links ====
Beispiel 1 (jQuery)
<pre>
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {

var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
</pre>

Beispiel 2 (jQuery) mit Offset

http://1stwebmagazine.com/jquery-scroll-to-anchor-point

JavaScript - Snippets

2017-02-28T18:20:05Z

93.208.111.215: /* Scroll / Fixed Navbar */

== Links ==
Siehe auch

[[JavaScripts - Basics]]

[[jQuery - Snippets]]

== Sonderzeichen in Alert-Meldungen ==

Oft sieht man im Web sehr hässliche alert-Meldungen , in denen die Umlaute nicht korrekt dargestellt sind. Das liegt auch daran, dass unterschiedliche Betriebssystem Zeichen unterschiedlich kodieren. Damit so etwas möglichst vermieden wird, sollte man solche Meldungen mit alert(unescape("...")) anzeigen.

Beispiel:
alert(unescape("So was d%E4mliches%21"));

Zeichen so verschlüsseln:
\ \\
" \"
' \'
Zeilenumbruch \n
Wagenrücklauf \r
(Den Unterschied zum Zeilenumbruch habe ich auch noch nicht begriffen.)
Tabulator \t

Zeichen so:
Ä %C4
Ö %D6
Ü %DC
ä %E4
ö %F6
ü %FC
ß %DF
€ %u20AC
$ %24
% %25

Generier Tool:
http://www.salesianer.de/util/alert-umlaute.html

== Teil einer Seite drucken ==
Old School JavaScript, sollte sich aber relativ einfach auf jQuery übertragen lassen.

Quelle: http://www.webstool.de/de/tipps_down_druck3.html Zugriff: 10/2011

Mit einem einfachen JavaScript lässt sich mit relativ wenig Aufwand eine druckerfreundliche Version einer Webseite bei Bedarf erzeugen.

Das JavaScript wird nachstehend vorgestellt:

<pre>
function ausgabe()
{
var ref = document.getElementById("auswahl");
var ausgabe;
// nächste Zeile öffnet ein Fenster der Größe 800 x 600 Pixel
ausgabe=window.open("#","fenster","width=800,height=600,resizable=yes,menubar=yes,left=50,top=50");
ausgabe.document.open();
ausgabe.document.write('<html>\n<head>\n<title>Druckversion</title>\n');
ausgabe.document.write('<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">\n');
// in der nächsten Zeile an das eigene Stylesheet anpassen
ausgabe.document.write('<link rel="stylesheet" href="../css/design1.css">\n</head>\n');
ausgabe.document.write('<body>\n<h1 align="center">© web s tool - Partner für Ihren Internetauftritt</h1>\n');
ausgabe.document.write('<div>\n');
// Ausgabe aller Inhalte mit der id = auswahl
while (ref!=null)
{
ausgabe.document.write(ref.innerHTML + '\n');
ref = ref.nextSibling;
}
ausgabe.document.write('</div>\n<p align="center"><a href="javascript:window.print()">drucken</a></p>\n</body>\n</html>\n');
ausgabe.document.close();
ausgabe.focus();
}
</pre>
Die externe Einbindung des JavaScripts erfolgt dabei z.B. im head-Bereich der Webseite über

<script language="JavaScript" src="../scripts/ausgabe4print.js"></script> .

Von entscheidender Bedeutung ist, dass auf der Seite das auszuwählende Objekt mit der id = "auswahl" (bitte bei Bedarf anpassen) versehen ist. Das auszuwählende Objekt kann dabei eine Tabelle oder ein div-Container sein.

Der Aufruf erfolgt z.B. durch den Link <a href="javascript:ausgabe();"> Druckversion</a>

== Fehler Behandlung ==
=== Prüfen ob ein Element existiert (normales JavaScript)===
<pre>
function isElement(obj) {
try {
//Using W3 DOM2 (works for FF, Opera and Chrom)
return obj instanceof HTMLElement;
}
catch(e){
return (typeof obj==="object") &&
(obj.nodeType===1) && (typeof obj.style === "object") &&
(typeof obj.ownerDocument ==="object");
}
}
</pre>

=== Prüfen ob ein Element in einem Objekt-Literal existiert und nicht null ist ===
<pre>
var data = {
"key1" : val,
"key2" : val,
"key3" : val
}
</pre>

<pre>
if( "key2" in data && data.key2 != null){
...
}
</pre>

== Eingaben Validieren ==
=== Handynummer validieren (normales JavaScript) ===
<pre>
function phone_is_valid(nr){
var reg2 = /^([0-9]{4,6})+\/([0-9]{6,11})$/;
return reg2.test(nr);
}
</pre>

=== Datum validieren (normales JavaScript) ===
<pre>
function date_is_valid(myDate){
var isValid = false;
var today = new Date();
if (!myDate) return false;
myDate=myDate.toString();
arrDate=myDate.split(".");
if (arrDate.length!=3) return false;
arrDate[0]=parseInt(arrDate[0],10);
arrDate[1]=parseInt(arrDate[1],10)-1;
if (arrDate[2].length==2) arrDate[2]="20"+arrDate[2]
var kontrolldatum=new Date(arrDate[2],arrDate[1],arrDate[0]);
// Datum gültig ?
if (kontrolldatum.getDate()==arrDate[0] && kontrolldatum.getMonth()==arrDate[1] && kontrolldatum.getFullYear()==arrDate[2])
{
// in der Zukunft
if (kontrolldatum.getTime()-today.getTime()+(24*60*60*1000) > 0)
return true;
}
return false;
}
</pre>
== Maus ==
[[JavaScript - Maus]]
== Timer ==
Quelle: http://blog.agrafix.net/2011/10/javascript-timers-mit-jquery/

Benötigte Funktionen sind window.setTimeout und window.setInterval
<pre>
// funktion verzögert aufrufen
function machWas() {
alert('alert() mit 1000ms verzögerung!');
}
window.setTimeout(machWas, 1000);

// funktion alle X Millisekunden aufruden
function machWasOft() {
alert('alle 1000ms ein alert()');
}

window.setInterval(machWasOft, 1000);
</pre>

Doch was ist, wenn ich jetzt einen solchen Timer ändern oder abbrechen möchte? Das ist eigentlich auch nicht schwer – die Funktionen setTimeout/setInterval geben ein Objekt zurück über das sie sich wieder beenden lassen.

<pre>
var x = 0;
function machWasAbbrechbarOft() {
x += 1;
if (x > 200) {
window.clearInterval(running); // beende das "Interval" nach 201 Ausführungen
}
}
var running = window.setInterval(machWasAbbrechbarOft, 1000);

</pre>

=== Timer mit jQuery ===
Für größere Projekte gibt es ein komfortableres jQuery Plugin

Mit diesem Plugin geht das “Interval” setzen dann wie folgt:

<pre>
$(document).everyTime(1000, "machWasOftAbbrechbar", function(i) { // alle 1000ms
alert('Hallo ich bin der ' + i + 'te Aufruf!'); // machWasOftAbbrechbar, hier die funktion die aufgerufen werden soll
}, 200); // 200 mal ausführen
Der zweite Parameter, machWasOftAbbrechbar, stellt hierbei ein sogenanntes “label” dar, über das man den gestarten Timer dann wieder abbrechen kann:

$(document).stopTime("machWasOftAbbrechbar"); // stoppe machWasOftAbbrechbar
</pre>

Viel mehr gibt’s eigentlich nicht dazu zu sagen – die Dokumentation dazu findet man, genau wie das Plugin selbst, unter http://plugins.jquery.com/project/timers.

== JavaScript - Objekte ==
[[JavaScript - Objektorientierte Programmierung]]
=== Objekte löschen ===
for (prop in allOverlays) { if (allOverlays.hasOwnProperty(prop)) { delete allOverlays[prop]; } } //ie 6 gc problems
//allOverlays = {};

== JavaScript - Strings ==
[[JavaScript - Strings]]

== JavaScript - HTML5 Audio ==
[[JavaScript - HTML5 Audio]]

== JavaScript - Verschiedenes ==
=== JavaScript Animation ===
Siehe [[Animation im Web]]
=== Sortieren ===
http://www.javascriptkit.com/javatutors/arraysort.shtml
==== URL Parameter auslesen ====
<pre>
function getUrlVars()
/* get GET Vars from URl */
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
</pre>

=== Anchor Teil bei Links extrahieren ===
Manchmal möchte man nur den Anchor Teil mit #meinAnchor
var url = "www.aaa.com/task1/1.3.html#a_1";
var hash = url.substring(url.indexOf("#")+1);
=== Scrolling ===
==== Scroll / Fixed Navbar ====
jQuery
<syntaxhighlight lang="javascript">
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
</script>
</syntaxhighlight>

CSS - wichtig vor allem fixed.
<syntaxhighlight lang="css">
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
</syntaxhighlight>

==== Smooth Scrolling für Anchor Tags oder toTop Links ====
Beispiel 1 (jQuery)
<pre>
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {

var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
</pre>

Beispiel 2 (jQuery) mit Offset

http://1stwebmagazine.com/jquery-scroll-to-anchor-point

JavaScript - Snippets

2017-02-28T17:45:57Z

93.208.111.215: /* Scroll / Fixed Navbar */

== Links ==
Siehe auch

[[JavaScripts - Basics]]

[[jQuery - Snippets]]

== Sonderzeichen in Alert-Meldungen ==

Oft sieht man im Web sehr hässliche alert-Meldungen , in denen die Umlaute nicht korrekt dargestellt sind. Das liegt auch daran, dass unterschiedliche Betriebssystem Zeichen unterschiedlich kodieren. Damit so etwas möglichst vermieden wird, sollte man solche Meldungen mit alert(unescape("...")) anzeigen.

Beispiel:
alert(unescape("So was d%E4mliches%21"));

Zeichen so verschlüsseln:
\ \\
" \"
' \'
Zeilenumbruch \n
Wagenrücklauf \r
(Den Unterschied zum Zeilenumbruch habe ich auch noch nicht begriffen.)
Tabulator \t

Zeichen so:
Ä %C4
Ö %D6
Ü %DC
ä %E4
ö %F6
ü %FC
ß %DF
€ %u20AC
$ %24
% %25

Generier Tool:
http://www.salesianer.de/util/alert-umlaute.html

== Teil einer Seite drucken ==
Old School JavaScript, sollte sich aber relativ einfach auf jQuery übertragen lassen.

Quelle: http://www.webstool.de/de/tipps_down_druck3.html Zugriff: 10/2011

Mit einem einfachen JavaScript lässt sich mit relativ wenig Aufwand eine druckerfreundliche Version einer Webseite bei Bedarf erzeugen.

Das JavaScript wird nachstehend vorgestellt:

<pre>
function ausgabe()
{
var ref = document.getElementById("auswahl");
var ausgabe;
// nächste Zeile öffnet ein Fenster der Größe 800 x 600 Pixel
ausgabe=window.open("#","fenster","width=800,height=600,resizable=yes,menubar=yes,left=50,top=50");
ausgabe.document.open();
ausgabe.document.write('<html>\n<head>\n<title>Druckversion</title>\n');
ausgabe.document.write('<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">\n');
// in der nächsten Zeile an das eigene Stylesheet anpassen
ausgabe.document.write('<link rel="stylesheet" href="../css/design1.css">\n</head>\n');
ausgabe.document.write('<body>\n<h1 align="center">© web s tool - Partner für Ihren Internetauftritt</h1>\n');
ausgabe.document.write('<div>\n');
// Ausgabe aller Inhalte mit der id = auswahl
while (ref!=null)
{
ausgabe.document.write(ref.innerHTML + '\n');
ref = ref.nextSibling;
}
ausgabe.document.write('</div>\n<p align="center"><a href="javascript:window.print()">drucken</a></p>\n</body>\n</html>\n');
ausgabe.document.close();
ausgabe.focus();
}
</pre>
Die externe Einbindung des JavaScripts erfolgt dabei z.B. im head-Bereich der Webseite über

<script language="JavaScript" src="../scripts/ausgabe4print.js"></script> .

Von entscheidender Bedeutung ist, dass auf der Seite das auszuwählende Objekt mit der id = "auswahl" (bitte bei Bedarf anpassen) versehen ist. Das auszuwählende Objekt kann dabei eine Tabelle oder ein div-Container sein.

Der Aufruf erfolgt z.B. durch den Link <a href="javascript:ausgabe();"> Druckversion</a>

== Fehler Behandlung ==
=== Prüfen ob ein Element existiert (normales JavaScript)===
<pre>
function isElement(obj) {
try {
//Using W3 DOM2 (works for FF, Opera and Chrom)
return obj instanceof HTMLElement;
}
catch(e){
return (typeof obj==="object") &&
(obj.nodeType===1) && (typeof obj.style === "object") &&
(typeof obj.ownerDocument ==="object");
}
}
</pre>

=== Prüfen ob ein Element in einem Objekt-Literal existiert und nicht null ist ===
<pre>
var data = {
"key1" : val,
"key2" : val,
"key3" : val
}
</pre>

<pre>
if( "key2" in data && data.key2 != null){
...
}
</pre>

== Eingaben Validieren ==
=== Handynummer validieren (normales JavaScript) ===
<pre>
function phone_is_valid(nr){
var reg2 = /^([0-9]{4,6})+\/([0-9]{6,11})$/;
return reg2.test(nr);
}
</pre>

=== Datum validieren (normales JavaScript) ===
<pre>
function date_is_valid(myDate){
var isValid = false;
var today = new Date();
if (!myDate) return false;
myDate=myDate.toString();
arrDate=myDate.split(".");
if (arrDate.length!=3) return false;
arrDate[0]=parseInt(arrDate[0],10);
arrDate[1]=parseInt(arrDate[1],10)-1;
if (arrDate[2].length==2) arrDate[2]="20"+arrDate[2]
var kontrolldatum=new Date(arrDate[2],arrDate[1],arrDate[0]);
// Datum gültig ?
if (kontrolldatum.getDate()==arrDate[0] && kontrolldatum.getMonth()==arrDate[1] && kontrolldatum.getFullYear()==arrDate[2])
{
// in der Zukunft
if (kontrolldatum.getTime()-today.getTime()+(24*60*60*1000) > 0)
return true;
}
return false;
}
</pre>
== Maus ==
[[JavaScript - Maus]]
== Timer ==
Quelle: http://blog.agrafix.net/2011/10/javascript-timers-mit-jquery/

Benötigte Funktionen sind window.setTimeout und window.setInterval
<pre>
// funktion verzögert aufrufen
function machWas() {
alert('alert() mit 1000ms verzögerung!');
}
window.setTimeout(machWas, 1000);

// funktion alle X Millisekunden aufruden
function machWasOft() {
alert('alle 1000ms ein alert()');
}

window.setInterval(machWasOft, 1000);
</pre>

Doch was ist, wenn ich jetzt einen solchen Timer ändern oder abbrechen möchte? Das ist eigentlich auch nicht schwer – die Funktionen setTimeout/setInterval geben ein Objekt zurück über das sie sich wieder beenden lassen.

<pre>
var x = 0;
function machWasAbbrechbarOft() {
x += 1;
if (x > 200) {
window.clearInterval(running); // beende das "Interval" nach 201 Ausführungen
}
}
var running = window.setInterval(machWasAbbrechbarOft, 1000);

</pre>

=== Timer mit jQuery ===
Für größere Projekte gibt es ein komfortableres jQuery Plugin

Mit diesem Plugin geht das “Interval” setzen dann wie folgt:

<pre>
$(document).everyTime(1000, "machWasOftAbbrechbar", function(i) { // alle 1000ms
alert('Hallo ich bin der ' + i + 'te Aufruf!'); // machWasOftAbbrechbar, hier die funktion die aufgerufen werden soll
}, 200); // 200 mal ausführen
Der zweite Parameter, machWasOftAbbrechbar, stellt hierbei ein sogenanntes “label” dar, über das man den gestarten Timer dann wieder abbrechen kann:

$(document).stopTime("machWasOftAbbrechbar"); // stoppe machWasOftAbbrechbar
</pre>

Viel mehr gibt’s eigentlich nicht dazu zu sagen – die Dokumentation dazu findet man, genau wie das Plugin selbst, unter http://plugins.jquery.com/project/timers.

== JavaScript - Objekte ==
[[JavaScript - Objektorientierte Programmierung]]
=== Objekte löschen ===
for (prop in allOverlays) { if (allOverlays.hasOwnProperty(prop)) { delete allOverlays[prop]; } } //ie 6 gc problems
//allOverlays = {};

== JavaScript - Strings ==
[[JavaScript - Strings]]

== JavaScript - HTML5 Audio ==
[[JavaScript - HTML5 Audio]]

== JavaScript - Verschiedenes ==
=== JavaScript Animation ===
Siehe [[Animation im Web]]
=== Sortieren ===
http://www.javascriptkit.com/javatutors/arraysort.shtml
==== URL Parameter auslesen ====
<pre>
function getUrlVars()
/* get GET Vars from URl */
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
</pre>

=== Anchor Teil bei Links extrahieren ===
Manchmal möchte man nur den Anchor Teil mit #meinAnchor
var url = "www.aaa.com/task1/1.3.html#a_1";
var hash = url.substring(url.indexOf("#")+1);
=== Scrolling ===
==== Scroll / Fixed Navbar ====
jQuery
<syntaxhighlight lang="javascript">
<script type="text/javascript">
jQuery(document).ready(function($) {

function sticky()
{
var window_top=$(window).scrollTop();
var top_position=$('body').offset().top;
var element_to_stick=$('.sticky');

if (window_top > top_position) {
element_to_stick.addClass('sticked');
} else {
element_to_stick.removeClass('sticked');
}
}
$(window).scroll(sticky);
sticky();

});
</script>
</syntaxhighlight>
CSS - wichtig vor allem fixed.
<syntaxhighlight lang="css">
div.sticked {
top: 0;
position: fixed;
width: 100%
z-index: 1000;
}
</syntaxhighlight>

==== Smooth Scrolling für Anchor Tags oder toTop Links ====
Beispiel 1 (jQuery)
<pre>
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {

var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
</pre>

Beispiel 2 (jQuery) mit Offset

http://1stwebmagazine.com/jquery-scroll-to-anchor-point

JavaScript - Snippets

2017-02-28T17:45:39Z

93.208.111.215: /* Scroll / Fixed Navbar */

== Links ==
Siehe auch

[[JavaScripts - Basics]]

[[jQuery - Snippets]]

== Sonderzeichen in Alert-Meldungen ==

Oft sieht man im Web sehr hässliche alert-Meldungen , in denen die Umlaute nicht korrekt dargestellt sind. Das liegt auch daran, dass unterschiedliche Betriebssystem Zeichen unterschiedlich kodieren. Damit so etwas möglichst vermieden wird, sollte man solche Meldungen mit alert(unescape("...")) anzeigen.

Beispiel:
alert(unescape("So was d%E4mliches%21"));

Zeichen so verschlüsseln:
\ \\
" \"
' \'
Zeilenumbruch \n
Wagenrücklauf \r
(Den Unterschied zum Zeilenumbruch habe ich auch noch nicht begriffen.)
Tabulator \t

Zeichen so:
Ä %C4
Ö %D6
Ü %DC
ä %E4
ö %F6
ü %FC
ß %DF
€ %u20AC
$ %24
% %25

Generier Tool:
http://www.salesianer.de/util/alert-umlaute.html

== Teil einer Seite drucken ==
Old School JavaScript, sollte sich aber relativ einfach auf jQuery übertragen lassen.

Quelle: http://www.webstool.de/de/tipps_down_druck3.html Zugriff: 10/2011

Mit einem einfachen JavaScript lässt sich mit relativ wenig Aufwand eine druckerfreundliche Version einer Webseite bei Bedarf erzeugen.

Das JavaScript wird nachstehend vorgestellt:

<pre>
function ausgabe()
{
var ref = document.getElementById("auswahl");
var ausgabe;
// nächste Zeile öffnet ein Fenster der Größe 800 x 600 Pixel
ausgabe=window.open("#","fenster","width=800,height=600,resizable=yes,menubar=yes,left=50,top=50");
ausgabe.document.open();
ausgabe.document.write('<html>\n<head>\n<title>Druckversion</title>\n');
ausgabe.document.write('<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">\n');
// in der nächsten Zeile an das eigene Stylesheet anpassen
ausgabe.document.write('<link rel="stylesheet" href="../css/design1.css">\n</head>\n');
ausgabe.document.write('<body>\n<h1 align="center">© web s tool - Partner für Ihren Internetauftritt</h1>\n');
ausgabe.document.write('<div>\n');
// Ausgabe aller Inhalte mit der id = auswahl
while (ref!=null)
{
ausgabe.document.write(ref.innerHTML + '\n');
ref = ref.nextSibling;
}
ausgabe.document.write('</div>\n<p align="center"><a href="javascript:window.print()">drucken</a></p>\n</body>\n</html>\n');
ausgabe.document.close();
ausgabe.focus();
}
</pre>
Die externe Einbindung des JavaScripts erfolgt dabei z.B. im head-Bereich der Webseite über

<script language="JavaScript" src="../scripts/ausgabe4print.js"></script> .

Von entscheidender Bedeutung ist, dass auf der Seite das auszuwählende Objekt mit der id = "auswahl" (bitte bei Bedarf anpassen) versehen ist. Das auszuwählende Objekt kann dabei eine Tabelle oder ein div-Container sein.

Der Aufruf erfolgt z.B. durch den Link <a href="javascript:ausgabe();"> Druckversion</a>

== Fehler Behandlung ==
=== Prüfen ob ein Element existiert (normales JavaScript)===
<pre>
function isElement(obj) {
try {
//Using W3 DOM2 (works for FF, Opera and Chrom)
return obj instanceof HTMLElement;
}
catch(e){
return (typeof obj==="object") &&
(obj.nodeType===1) && (typeof obj.style === "object") &&
(typeof obj.ownerDocument ==="object");
}
}
</pre>

=== Prüfen ob ein Element in einem Objekt-Literal existiert und nicht null ist ===
<pre>
var data = {
"key1" : val,
"key2" : val,
"key3" : val
}
</pre>

<pre>
if( "key2" in data && data.key2 != null){
...
}
</pre>

== Eingaben Validieren ==
=== Handynummer validieren (normales JavaScript) ===
<pre>
function phone_is_valid(nr){
var reg2 = /^([0-9]{4,6})+\/([0-9]{6,11})$/;
return reg2.test(nr);
}
</pre>

=== Datum validieren (normales JavaScript) ===
<pre>
function date_is_valid(myDate){
var isValid = false;
var today = new Date();
if (!myDate) return false;
myDate=myDate.toString();
arrDate=myDate.split(".");
if (arrDate.length!=3) return false;
arrDate[0]=parseInt(arrDate[0],10);
arrDate[1]=parseInt(arrDate[1],10)-1;
if (arrDate[2].length==2) arrDate[2]="20"+arrDate[2]
var kontrolldatum=new Date(arrDate[2],arrDate[1],arrDate[0]);
// Datum gültig ?
if (kontrolldatum.getDate()==arrDate[0] && kontrolldatum.getMonth()==arrDate[1] && kontrolldatum.getFullYear()==arrDate[2])
{
// in der Zukunft
if (kontrolldatum.getTime()-today.getTime()+(24*60*60*1000) > 0)
return true;
}
return false;
}
</pre>
== Maus ==
[[JavaScript - Maus]]
== Timer ==
Quelle: http://blog.agrafix.net/2011/10/javascript-timers-mit-jquery/

Benötigte Funktionen sind window.setTimeout und window.setInterval
<pre>
// funktion verzögert aufrufen
function machWas() {
alert('alert() mit 1000ms verzögerung!');
}
window.setTimeout(machWas, 1000);

// funktion alle X Millisekunden aufruden
function machWasOft() {
alert('alle 1000ms ein alert()');
}

window.setInterval(machWasOft, 1000);
</pre>

Doch was ist, wenn ich jetzt einen solchen Timer ändern oder abbrechen möchte? Das ist eigentlich auch nicht schwer – die Funktionen setTimeout/setInterval geben ein Objekt zurück über das sie sich wieder beenden lassen.

<pre>
var x = 0;
function machWasAbbrechbarOft() {
x += 1;
if (x > 200) {
window.clearInterval(running); // beende das "Interval" nach 201 Ausführungen
}
}
var running = window.setInterval(machWasAbbrechbarOft, 1000);

</pre>

=== Timer mit jQuery ===
Für größere Projekte gibt es ein komfortableres jQuery Plugin

Mit diesem Plugin geht das “Interval” setzen dann wie folgt:

<pre>
$(document).everyTime(1000, "machWasOftAbbrechbar", function(i) { // alle 1000ms
alert('Hallo ich bin der ' + i + 'te Aufruf!'); // machWasOftAbbrechbar, hier die funktion die aufgerufen werden soll
}, 200); // 200 mal ausführen
Der zweite Parameter, machWasOftAbbrechbar, stellt hierbei ein sogenanntes “label” dar, über das man den gestarten Timer dann wieder abbrechen kann:

$(document).stopTime("machWasOftAbbrechbar"); // stoppe machWasOftAbbrechbar
</pre>

Viel mehr gibt’s eigentlich nicht dazu zu sagen – die Dokumentation dazu findet man, genau wie das Plugin selbst, unter http://plugins.jquery.com/project/timers.

== JavaScript - Objekte ==
[[JavaScript - Objektorientierte Programmierung]]
=== Objekte löschen ===
for (prop in allOverlays) { if (allOverlays.hasOwnProperty(prop)) { delete allOverlays[prop]; } } //ie 6 gc problems
//allOverlays = {};

== JavaScript - Strings ==
[[JavaScript - Strings]]

== JavaScript - HTML5 Audio ==
[[JavaScript - HTML5 Audio]]

== JavaScript - Verschiedenes ==
=== JavaScript Animation ===
Siehe [[Animation im Web]]
=== Sortieren ===
http://www.javascriptkit.com/javatutors/arraysort.shtml
==== URL Parameter auslesen ====
<pre>
function getUrlVars()
/* get GET Vars from URl */
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
</pre>

=== Anchor Teil bei Links extrahieren ===
Manchmal möchte man nur den Anchor Teil mit #meinAnchor
var url = "www.aaa.com/task1/1.3.html#a_1";
var hash = url.substring(url.indexOf("#")+1);
=== Scrolling ===
==== Scroll / Fixed Navbar ====
jQuery
<syntaxhighlight lang="javascript">
<script type="text/javascript">
jQuery(document).ready(function($) {

function sticky()
{
var window_top=$(window).scrollTop();
var top_position=$('body').offset().top;
var element_to_stick=$('.sticky');

if (window_top > top_position) {
element_to_stick.addClass('sticked');
} else {
element_to_stick.removeClass('sticked');
}
}
$(window).scroll(sticky);
sticky();

});
</script>
</syntaxhighlight>
CSS - wichtig vor allem fixed.
<syntaxhighlight lang="css">
div.sticky {
top: 0;
position: fixed;
width: 100%
z-index: 1000;
}
</syntaxhighlight>

==== Smooth Scrolling für Anchor Tags oder toTop Links ====
Beispiel 1 (jQuery)
<pre>
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {

var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
</pre>

Beispiel 2 (jQuery) mit Offset

http://1stwebmagazine.com/jquery-scroll-to-anchor-point

JavaScript - Snippets

2017-02-28T17:34:27Z

93.208.111.215: /* Scrolling */

== Links ==
Siehe auch

[[JavaScripts - Basics]]

[[jQuery - Snippets]]

== Sonderzeichen in Alert-Meldungen ==

Oft sieht man im Web sehr hässliche alert-Meldungen , in denen die Umlaute nicht korrekt dargestellt sind. Das liegt auch daran, dass unterschiedliche Betriebssystem Zeichen unterschiedlich kodieren. Damit so etwas möglichst vermieden wird, sollte man solche Meldungen mit alert(unescape("...")) anzeigen.

Beispiel:
alert(unescape("So was d%E4mliches%21"));

Zeichen so verschlüsseln:
\ \\
" \"
' \'
Zeilenumbruch \n
Wagenrücklauf \r
(Den Unterschied zum Zeilenumbruch habe ich auch noch nicht begriffen.)
Tabulator \t

Zeichen so:
Ä %C4
Ö %D6
Ü %DC
ä %E4
ö %F6
ü %FC
ß %DF
€ %u20AC
$ %24
% %25

Generier Tool:
http://www.salesianer.de/util/alert-umlaute.html

== Teil einer Seite drucken ==
Old School JavaScript, sollte sich aber relativ einfach auf jQuery übertragen lassen.

Quelle: http://www.webstool.de/de/tipps_down_druck3.html Zugriff: 10/2011

Mit einem einfachen JavaScript lässt sich mit relativ wenig Aufwand eine druckerfreundliche Version einer Webseite bei Bedarf erzeugen.

Das JavaScript wird nachstehend vorgestellt:

<pre>
function ausgabe()
{
var ref = document.getElementById("auswahl");
var ausgabe;
// nächste Zeile öffnet ein Fenster der Größe 800 x 600 Pixel
ausgabe=window.open("#","fenster","width=800,height=600,resizable=yes,menubar=yes,left=50,top=50");
ausgabe.document.open();
ausgabe.document.write('<html>\n<head>\n<title>Druckversion</title>\n');
ausgabe.document.write('<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">\n');
// in der nächsten Zeile an das eigene Stylesheet anpassen
ausgabe.document.write('<link rel="stylesheet" href="../css/design1.css">\n</head>\n');
ausgabe.document.write('<body>\n<h1 align="center">© web s tool - Partner für Ihren Internetauftritt</h1>\n');
ausgabe.document.write('<div>\n');
// Ausgabe aller Inhalte mit der id = auswahl
while (ref!=null)
{
ausgabe.document.write(ref.innerHTML + '\n');
ref = ref.nextSibling;
}
ausgabe.document.write('</div>\n<p align="center"><a href="javascript:window.print()">drucken</a></p>\n</body>\n</html>\n');
ausgabe.document.close();
ausgabe.focus();
}
</pre>
Die externe Einbindung des JavaScripts erfolgt dabei z.B. im head-Bereich der Webseite über

<script language="JavaScript" src="../scripts/ausgabe4print.js"></script> .

Von entscheidender Bedeutung ist, dass auf der Seite das auszuwählende Objekt mit der id = "auswahl" (bitte bei Bedarf anpassen) versehen ist. Das auszuwählende Objekt kann dabei eine Tabelle oder ein div-Container sein.

Der Aufruf erfolgt z.B. durch den Link <a href="javascript:ausgabe();"> Druckversion</a>

== Fehler Behandlung ==
=== Prüfen ob ein Element existiert (normales JavaScript)===
<pre>
function isElement(obj) {
try {
//Using W3 DOM2 (works for FF, Opera and Chrom)
return obj instanceof HTMLElement;
}
catch(e){
return (typeof obj==="object") &&
(obj.nodeType===1) && (typeof obj.style === "object") &&
(typeof obj.ownerDocument ==="object");
}
}
</pre>

=== Prüfen ob ein Element in einem Objekt-Literal existiert und nicht null ist ===
<pre>
var data = {
"key1" : val,
"key2" : val,
"key3" : val
}
</pre>

<pre>
if( "key2" in data && data.key2 != null){
...
}
</pre>

== Eingaben Validieren ==
=== Handynummer validieren (normales JavaScript) ===
<pre>
function phone_is_valid(nr){
var reg2 = /^([0-9]{4,6})+\/([0-9]{6,11})$/;
return reg2.test(nr);
}
</pre>

=== Datum validieren (normales JavaScript) ===
<pre>
function date_is_valid(myDate){
var isValid = false;
var today = new Date();
if (!myDate) return false;
myDate=myDate.toString();
arrDate=myDate.split(".");
if (arrDate.length!=3) return false;
arrDate[0]=parseInt(arrDate[0],10);
arrDate[1]=parseInt(arrDate[1],10)-1;
if (arrDate[2].length==2) arrDate[2]="20"+arrDate[2]
var kontrolldatum=new Date(arrDate[2],arrDate[1],arrDate[0]);
// Datum gültig ?
if (kontrolldatum.getDate()==arrDate[0] && kontrolldatum.getMonth()==arrDate[1] && kontrolldatum.getFullYear()==arrDate[2])
{
// in der Zukunft
if (kontrolldatum.getTime()-today.getTime()+(24*60*60*1000) > 0)
return true;
}
return false;
}
</pre>
== Maus ==
[[JavaScript - Maus]]
== Timer ==
Quelle: http://blog.agrafix.net/2011/10/javascript-timers-mit-jquery/

Benötigte Funktionen sind window.setTimeout und window.setInterval
<pre>
// funktion verzögert aufrufen
function machWas() {
alert('alert() mit 1000ms verzögerung!');
}
window.setTimeout(machWas, 1000);

// funktion alle X Millisekunden aufruden
function machWasOft() {
alert('alle 1000ms ein alert()');
}

window.setInterval(machWasOft, 1000);
</pre>

Doch was ist, wenn ich jetzt einen solchen Timer ändern oder abbrechen möchte? Das ist eigentlich auch nicht schwer – die Funktionen setTimeout/setInterval geben ein Objekt zurück über das sie sich wieder beenden lassen.

<pre>
var x = 0;
function machWasAbbrechbarOft() {
x += 1;
if (x > 200) {
window.clearInterval(running); // beende das "Interval" nach 201 Ausführungen
}
}
var running = window.setInterval(machWasAbbrechbarOft, 1000);

</pre>

=== Timer mit jQuery ===
Für größere Projekte gibt es ein komfortableres jQuery Plugin

Mit diesem Plugin geht das “Interval” setzen dann wie folgt:

<pre>
$(document).everyTime(1000, "machWasOftAbbrechbar", function(i) { // alle 1000ms
alert('Hallo ich bin der ' + i + 'te Aufruf!'); // machWasOftAbbrechbar, hier die funktion die aufgerufen werden soll
}, 200); // 200 mal ausführen
Der zweite Parameter, machWasOftAbbrechbar, stellt hierbei ein sogenanntes “label” dar, über das man den gestarten Timer dann wieder abbrechen kann:

$(document).stopTime("machWasOftAbbrechbar"); // stoppe machWasOftAbbrechbar
</pre>

Viel mehr gibt’s eigentlich nicht dazu zu sagen – die Dokumentation dazu findet man, genau wie das Plugin selbst, unter http://plugins.jquery.com/project/timers.

== JavaScript - Objekte ==
[[JavaScript - Objektorientierte Programmierung]]
=== Objekte löschen ===
for (prop in allOverlays) { if (allOverlays.hasOwnProperty(prop)) { delete allOverlays[prop]; } } //ie 6 gc problems
//allOverlays = {};

== JavaScript - Strings ==
[[JavaScript - Strings]]

== JavaScript - HTML5 Audio ==
[[JavaScript - HTML5 Audio]]

== JavaScript - Verschiedenes ==
=== JavaScript Animation ===
Siehe [[Animation im Web]]
=== Sortieren ===
http://www.javascriptkit.com/javatutors/arraysort.shtml
==== URL Parameter auslesen ====
<pre>
function getUrlVars()
/* get GET Vars from URl */
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
</pre>

=== Anchor Teil bei Links extrahieren ===
Manchmal möchte man nur den Anchor Teil mit #meinAnchor
var url = "www.aaa.com/task1/1.3.html#a_1";
var hash = url.substring(url.indexOf("#")+1);
=== Scrolling ===
==== Scroll / Fixed Navbar ====
jQuery
<syntaxhighlight lang="javascript">
<script type="text/javascript">
jQuery(document).ready(function($) {

function sticky()
{
var window_top=$(window).scrollTop();
var top_position=$('body').offset().top;
var element_to_stick=$('#myStickyElement');

if (window_top > top_position) {
element_to_stick.addClass('sticky');
} else {
element_to_stick.removeClass('sticky');
}
}
$(window).scroll(sticky);
sticky();

});
</script>
</syntaxhighlight>
CSS - wichtig vor allem fixed.
<syntaxhighlight lang="css">
div.sticky {
top: 0;
position: fixed;
width: 100%
z-index: 1000;
}
</syntaxhighlight>
==== Smooth Scrolling für Anchor Tags oder toTop Links ====
Beispiel 1 (jQuery)
<pre>
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {

var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
</pre>

Beispiel 2 (jQuery) mit Offset

http://1stwebmagazine.com/jquery-scroll-to-anchor-point