Wikizone - Benutzerbeiträge [de]

JSON

2013-09-27T13:01:27Z

79.240.52.209:

== JSON - JavaScript Object Notation ==

Kann XML Datenstrukturen ersetzen und hat dabei wesentlich weniger Overhead. Derzeit der Quasi-Standard.

- Lesbar für Menschen

- Einfach zu Parsen für Maschinen

- Leichtgewichtig

== Links ==
[[PHP und JSON]]

[[JQuery - AJAX]]

http://json.org/

http://json.org/json-de.html

http://www.jsoneditoronline.org/

== Erweiterungen ==
GeoJson - Spezifikation für Geoobjekte

== Beispiele ==

JQuery - AJAX

2013-09-27T13:00:22Z

79.240.52.209: /* JSON Daten über jQuery lesen */

== Wie funktioniert AJAX ? ==

Früher mußte man bei jeder Anfrage die Webseite komplett neu laden. Auch wenn nur ein kleiner Teil neu benötigt wird (z.B. ein Suchergebnis). Mit AJAX kann man Teile einer Website neu laden. Das funktioniert über ein JavaScript Objekt den sogenannten '''XML-HTTP Request''' oder kurz '''XHR'''. Dieser kommuniziert quasi am Browser vorbei mit dem Server.

Die alte Kommunikationsart ist Synchron: Eine Anfrage - eine Webseite. Die neue Art ist asynchron. Alle Eigenschaften zusammengefaßt spricht man von '''A'''synchronous '''J'''avaScript '''a'''nd '''X'''ML - AJAX

Übertragen wird immer Klartext, allerdings selten XML-Daten. Heute nutzt man eher HTML-Fragmente oder JSON Daten.

==jQuery und AJAX==
jQuery bietet eine gute AJAX Unterstützung, und macht es dem Programmierer leicht mit den Besonderheiten der verschiedenen Browser umzugehen.

== Datenanforderung mit jQuery und AJAX ==
Daten werden vom Server immer im Klartext geliefert und über das http Protokoll übertragen.
=== Textdatei anfordern ===
ajax1.html
<pre>
<html>
<head>
<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("button:first").click(function(){
$.get("ajax.txt", function(data){
$("#ausgabe").text(data);
});
});
$("button:eq(1)").click(function(){
$.post("ajax.txt", function(data){
$("#ausgabe").text(data);
});
});
});
</script>
</head>
<body>
<button>AJAX-Anfrage mit $.get()</button>
<button>AJAX-Anfrage mit $.post()</button>
<div id="ausgabe"></div>
</body>
</html>
</pre>

ajax.txt
<pre>
Es gibt zwei Sachen, denen ich mir völlig sicher bin. Erstens: Männer sind viel schlauer als Frauen! Und zweitens? Die Erde ist flach. Genau.
</pre>

Erklärung:

Die 2 Buttons bekommen eine Klickfunktion zugewiesen.
Button 1 führt einen AJAX Request über GET aus. Button 2 über Post ($.get() bzw. $.post()). Als Parameter enthält die Funktion die Datei und eine weitere Funktion (oder Referenz auf eine Funktion). Diese neue Funktion bekommt als Parameter die erhaltenen Daten und schreibt sie in das div mit der id #ausgabe.

=== HTML Anfordern ===
Enthält die Antwort HTML Daten sollte der Browser sie auch so interpretieren. Dazu kann man jQuery direkt mitteilen, dass es sich um HTML Daten handelt.
<pre>
//$("#ausgabe").text(data);
$("#ausgabe").html(data);
</pre>

== Kommunikation mit dem Server über AJAX und jQuery ==
'''ajax.html'''
<pre>
<html>
<head>
<script type="text/javascript"
src="lib/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("button:first").click(function(){
$.get("login_get.php",
{
username: $("input:first").val(),
password: $("input:last").val()
},
function(data){
$("#ausgabe").html(data);
}
);
});
$("button:last").click(function(){
$.post("login_post.php",
{
username: $("input:first").val(),
password: $("input:last").val()
},
function(data){
$("#ausgabe").html(data);
}
);
});
});
</script>
</head>
<body>
<h1>Bitte Benutzername und Passwort eingeben</h1>
<form name="f1">
<table width="200" border="1">
<tr>
<td>Name</td><td><input type="text" size="30"></td>
</tr>
<tr>
<td>Passwort</td>
<td><input type="password" size="30"></td>
</tr>
</table>
</form>
<button>AJAX-Login mit $.get()</button>
<button>AJAX-Login mit $.post()</button>
<div id="ausgabe"></div>
</body>
</html>
</pre>

Der Aufruf erfolgt fast gleich. Nur werden in diesem Fall 3 Parameter übergeben.
1. Der Name des Skriptes. 2. Die Daten die übermittelt werden. 3. Eine (anonyme) Funktion die die Antwort des Servers verarbeitet.

Interessant ist also Parameter2. Hier wird einfach wie in jQuery an vielen Stellen üblich mit einem Optionen-Objekt gearbeitet. Dieses enthält die Deklarationen der Übergabewerte in der Form

bezeichner : wert

ln diesem Fall ist der Wert die Eingabe der HTML Input Felder (hier das erste Input der Seite).

username : $("input:first").val(),

'''login_get.php'''
<pre>
<?php

$host = "localhost"; // Der MySQL-Server
$user = "root";// Der Datenbank Benutzername
$password = ""; // Das Passwort für die Datenbank
$dbname = "jquery"; // Der Name der Datenbank
$tabelle ="logindaten"; // Der Name der Tabelle
$loginrichtig =false;
$dbverbindung = mysql_connect ($host, $user, $password);
$dbanfrage = "SELECT * from $tabelle";
$result = mysql_db_query ($dbname, $dbanfrage, $dbverbindung);
while ($ausgabe = mysql_fetch_array ($result)) {
if (($ausgabe['username'] == $_GET['username']) && ($ausgabe['password'] == $_GET['password']) )
{$loginrichtig=true;
break;
}
}
if($loginrichtig) {
echo "Login erfolgreich";
}
else {
echo "Leider war ihr Login nicht erfolgreich, bitte überprüfen sie ihre Eingaben.";
}

mysql_close ($dbverbindung);
?>

Auf Seite des PHP-Skriptes kommen die Daten als GET oder POST Variablen an (Hier GET).

Als Antwort erwartet AJAX ja Klartext. Das bedeutet wir können einfach eine ganz normale Ausgabe über Echo machen. Möchten wir Daten zurückgeben muß das ebenfalls über Klartext funktionieren. Dazu können wir dann z.B. JSON oder XML nehmen.
</pre>

== Kommunikation über JSON ==
Eine gute Methode Strukturierte Daten (Objekte, Arrays, etc.) zu übertragen ist JSON. JSON ist eine Methode strukturierte Daten als platzsparenden String zu speichern, der trotzdem für den Menschen lesbar bleibt, aber auch vom Rechner leicht verarbeitet werden kann.

=== JSON - Daten ===
So sieht es aus.

'''ajax.json'''
<pre>
{
"name" : "Stephan Schlegel",
"beruf" : "Dipl Ing audiovisuelle Medien",
"ort" : "Nürtingen",
"webseiten" : {
"url1" : "www.geo-bit.de",
"url2" : "www.3d-relief.com",
"url3" : "www.ko-rockband.de"
}
}
</pre>

Im Prinzip ist es wieder ein Objekt indem es Bezeichner und Wertzuweisungen gibt. Im Fall Webseiten ist der Wert wiederum ein Objekt, bestehend aus Bezeichnern und Werten.

=== JSON Daten über jQuery lesen ===
<pre>
<html>
<head>
<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("button:first").click(function(){
$.getJSON("ajax.json", function(data){
$("#ausgabe").append(data.name + ", " + data.webseiten.url1);
});
});
});
</script>
</head>
<body>
<button>getJSON</button>
<div id="ausgabe"></div>
</body>
</html>
</pre>

Die Daten werden über getJSON geladen:
$.getJSON("ajax.json", function(data){ $("#ausgabe").append(data.name + ", " + data.webseiten.url1); });
$.getJSON("Datei", meineFunktion(data));

An die Funktion wird das Bezeichner-Objekt data übergeben und über dieses kann man auf die enthaltenen Daten zugreifen. Hier z.B. auf Name oder die erste URL.

data.name
data.webseiten.url1

'''Hinweis:''' über die getJSON Funktion werden die Daten direkt in ein jQuery Objekt umgewandelt. Über get und post würde man einfach den Text bekommen. Man kann aber einen JSON String auch nachträglich umwandeln. Dafür gibt es die jQuery Funkion parseJSON(json).

==== Beispiel Datensätze aus einem JSON Objekt verarbeiten mit each ====

Beispiel einer Funktion aus dem 3d-relief map-editor. Im Beispiel wird ein Dropdown-Feld erzeugt, in dem sich alle Produkte auswählen lassen. Zusätzlich wird ein Click Handler registriert. Der bei Klick wiederum eine JS Funktion "loadMap" ausführt.

<pre>
...
$.getJSON("dataHandler.php",{action:"loadMaps"},function(data){
//mapData = data;
createMapSelector(data);
});
...
</pre>

Übergeben wird das Data Objekt an diese Funktion

<pre>

function createMapSelector(data){
$("#map_selector_wrap").html('<div><h3>Select Relief Map</h3><select id="map_selector" name="map_selector">');
$("#map_selector").append('<option value="na">Select product to view details</option>');
$.each(data,function(key,obj){
if(obj.products_name != null)
$("#map_selector").append('<option value="' + obj.products_id + '">' + obj.products_name + '</option>');
});
$("#map_selector_wrap").append('</select></div>');
// click handler for selector
$("#map_selector").change(function(){
actID=$("#map_selector option:selected").val()
if(actID != "na")
loadMap(actID);
});
}

</pre>

=== JSON Daten Senden ===
Daten aus einem Formular kann man einfach z.B. an ein PHP Skript senden

=== JSON Daten von fremden Servern ===
Normalerweise holt JavaScript Daten nur vom gleichen Server, auf dem das Skript läuft. Dies kann man mit JSONP umgehen.
Das etwas umfangreichere Beispiel liest Twitterdaten über JSON und die Twitter API.

[[jQuery und JSONP - Tweets von Twitter lesen]]

siehe auch nächstes Beispiel "JavaScript" nachladen.

=== JavaScript nachladen ===
Mit jQuery kann man JavaScripte nachladen. Die enthaltenen Statements werden automatisch ausgeführt, bzw. enthaltene Funktionen verfügbar gemacht.
So kann man sehr schön seine Funktionen auf mehrere Bibliotheken aufteilen und bei Bedarf laden.

<pre>
$.getScript("ajax/test.js", function(data, textStatus, jqxhr) {
console.log(data); //data returned
console.log(textStatus); //success
console.log(jqxhr.status); //200
console.log('Load was performed.');
});
</pre>

'''ajax.html'''
<pre>
<html>
<head>
<script type="text/javascript"
src="lib/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("button:first").click(function(){
$.getScript("zufall.js", function(){
$("#ausgabe").text(zufallsZahl());
});
});
$("button:last").click(function(){
$.getScript("http://mydomain.de/jquery/zufall.js", function(){
$("#ausgabe").text(zufallsZahl());
});
});
});
</script>
</head>
<body>
<button>Lade Skript von gleicher Domain</button>
<button>Lade Skript von fremder Domain</button>
<div id="ausgabe"></div>
</body>
</html>
</pre>

'''zufall.js'''
<pre>
function zufallsZahl(){
return Math.random();
}
</pre>

JQuery - Snippets

2013-09-27T12:57:29Z

79.240.52.209: /* Formulare */

Nützliche jQuery Schnipsel
== Grundgerüst zum testen ==
<pre>
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>

<body>

<style type="text/css">
</style>

<script type="text/javascript">
$(document).ready(function() {

});

function newFunc(myParam){
alert('hello world')
}
</script>

<h1>Testpage</h1>

</body>
</html>
</pre>
== Links ==
[[JavaScript - Snippets]]

http://css-tricks.com/snippets/jquery/

=== jQuery Countdown Scripts ===
http://www.tripwiremagazine.com/2012/01/jquery-countdown-scripts.html

== Formulare ==
Siehe auch [[JQuery - AJAX]]
=== GET-Variable in URL auslesen ===
Diese muß extrahiert werden.

Beispiel 1:

Quelle: http://jquery-howto.blogspot.de/2009/09/get-url-parameters-values-with-jquery.html (Zugriff: 2013/01)

<pre>
// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
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>

Kurzform:
<pre>
function getUrlVars()
{
return window.location.href.slice(window.location.href.indexOf('?')).split(/[&?]{1}[\w\d]+=/);
}
</pre>

Aufruf von:
http://www.example.com/?me=myValue&name2=SomeOtherValue

ergibt folgendes Array:
<pre>
{
"me" : "myValue",
"name2" : "SomeOtherValue"
}
</pre>
Hinweis: Bei mir funktionierte es nicht mit Aufruf ohne Parameter. Dann entsteht nur ein nicht assoziatives Array. Das liegt wahrscheinlich daran, daß JavaScript eigentlich keine assoziativen Arrays kennt. Folgender Aufruf funktioniert aber:

<pre>
var first = getUrlVars()["me"];

// To get the second parameter
var second = getUrlVars()["name2"];
</pre>

Beispiel 2:

Etwas älteres Beispiel von: http://www.tutorials.de/javascript-ajax/149174-probleme-mit-dem-auslesen-von-variablen.html (Zugriff 2013/01)

<pre>
<SCRIPT type="text/javascript">

</SCRIPT>
</pre>

=== Fokus auf erstes Input-Feld im Formular setzen ===
// focus on the first text input field on the page
$("input[type='text']:first", document.forms[0]).focus();

=== Werte von Formularen auslesen ===
http://www.beier-christian.eu/blog/weblog/jquery-ausgewahlte-option-aus-select-box-auslesen/

==== Select Boxen ====
Hinweis, vieles ist natürlich auch mit anderen Elementen möglich.
<pre>
<label for="obst">Obst</label>
<select name="obst" id="obst">
<option value="1">Orange</option>
<option value="2">Apfel</option>
<option value="3">Banane</option>
</select>
</pre>

Wert auslesen
$('select#obst').val();

Text des Wertes auslesen
$('select#obst :selected').text();

Text mehrerer gewählter Optionen ausgeben:

<pre>
$('select#obst :selected').each(function(i, option) {
// Verarbeitung der Optionen
alert(option.value + ' ' + option.text);
});
</pre>
Beispiel: Alle gewählten Werte bei Veränderung in ein div (id=message) schreiben:
<pre>
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text();
});
$("div#message").text(str);
}).change();
</pre>

==== Checkboxen ====
Links:
http://technosophos.com/node/223 (Zugriff 07-2012)

Beispiele
<pre>
// Checked ? Returns a boolean, true if checked, false otherwise
jQuery('#my-checkbox').is(':checked');

// Check checkbox - this sets the attribute checked="checked"
jQuery('#my-checkbox').attr('checked','checked');

// Uncheck checkbox (right way)
jQuery('#my-checkbox').removeAttr('checked');
</pre>
<pre>
// Check / Uncheck everything

// Check anything that is not already checked:
jQuery(':checkbox:not(:checked)').attr('checked', 'checked');

// Remove the checkbox
jQuery(':checkbox:checked').removeAttr('checked');
</pre>

Kleines Hide Show Script wenn eine Checkbox ausgewählt ist:
<pre>
$("input[name='calib_as_offered']").change(function() {
if ($("input[name='calib_as_offered']").is(":checked")){
$("#contact_address").show();
$("#offer_nr_wrap").show();
}
else {
$("#contact_address").hide();
$("#offer_nr_wrap").hide();
}
});

</pre>

==== Radio Buttons ====

'''Change Listener für Radio Buttons''' (Quelle: http://stackoverflow.com/questions/10167395/how-can-i-attach-a-listener-to-multiple-radio-buttons Zugriff: 2013-08)
<pre>
$('input:radio').on('change', function(){
//access value of changed radio group with $(this).val()
});
</pre>

Quelle der folgenden Beispiele: http://mabraham.de/jquery-radio-buttons-auslesen-und-manipulieren/ (Zugriff 2013-08)

'''Wert (value) einer Radio Group auslesen.'''
<pre>
$('#radio-button-value').click(function(){
alert($("input[name='radio-button-gruppe']:checked").val());
});
</pre>

'''Radio Button gewählt checked ?'''
<pre>
$('#radio-button-is-set').click(function(){
alert(typeof $("input[name='radio-button-gruppe']:checked").val() != 'undefined');
});
</pre>

'''Radio Button anhand seiner Id auswählen (check)'''
<pre>
$('#radio-checked-by-id').click(function(){
$("#gruppe1").attr("checked","checked");
});
</pre>

'''Radio Button über Wert auswählen (check) '''
<pre>
$('#radio-checked-by-value').click(function(){
$("input[name='radio-button-gruppe'][value='2']").attr("checked","checked");
});
</pre>

'''Radio Button abwählen'''
<pre>
$('#radio-uncheck').click(function(){
$("input[name='radio-button-gruppe']:checked").removeAttr("checked");
});
</pre>

== Browser ==
=== Resize des Browserfensters feststellen ===
<pre>
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){

//If the User resizes the window, adjust the #container height
$(window).bind("resize", resizeWindow);
function resizeWindow( e ) {
var newWindowHeight = $(window).height();
$("#container").css("min-height", newWindowHeight );
}

});
</script>

</pre>

== Templates - Vorlagen ==
=== XHTML 1.0 Template mit jQuery ===
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Title goes here » Site title here</title>


<base href="" />
<meta name="author" content="#" />
<meta name="description" content="#" />
<meta name="copyright" content="#" />
<meta name="robots" content="#" />
<meta name="generator" content="#" />
<meta name="keywords" content="#" />
<meta http-equiv="expires" content="#" />
<meta http-equiv="cache-control" content="#" />


<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />


<script type="text/javascript">
/*<![CDATA[*/
// add 'js' class to root element to nicely allow css that degrades gracefully if js is disabled
document.getElementsByTagName('html')[0].className = 'js';
/*]]>*/
</script>


<link rel="stylesheet" href="/stylesheets/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="/stylesheets/print.css" type="text/css" media="print" />



</head>
<body>
<div id="container">

<div id="header">
<h1>Title of page goes here</h1>
<h2>Subtitle of page goes here</h2>
</div>

<div id="nav">
<ul class="menu">
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#">Link #3</a></li>
</ul>
<ul class="breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#">Sub directory</a></li>
<li><a href="#">Current page</a></li>
</ul>
</div>

<div id="main">
<ul class="sidebar">
<li><a href="#">Sidebar link #1</a></li>
<li><a href="#">Sidebar link #2</a></li>
</ul>

<div id="sub1">
<h3>Title of content</h3>
<p>Begin content here</p>
</div>

<div id="sub2" class="hide">
<h3>Title of content</h3>
<p>Begin content here</p>
</div>
</div>

<div id="footer">
<p>©2XXX company name here. Creative Commons link, your own link, validation, etc.</p>
</div>

</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/app.js"></script>



</body>
</html>
</pre>
== JavaScript nachladen während die Seite schon angezeigt wird ==
<pre>
// Add this onDocumentReady function to the end of the jQuery.js file.
// It MUST be in the jquery file to work correctly.
$(function(){
var scripts = /\?(.*)/, files = [], path = /^.*\//, loaded = 0, count = 0;

$('script').each(function(){
var src = $(this).attr('src');
if (!scripts.test(src)) return;
var pathto = src.match(path);
files = files.concat($.map(src.match(scripts).pop().split(','), function(e,i){
return pathto+e+'.js'
}));
})

count = files.length;

$.each(files, function(){
$.getScript(this, function(){
loaded++;
if(loaded == count && typeof onBackload == 'function')
onBackload(loaded)
})
})
});

/**
* If you have the following script tags:
* <script src="/path/to/jquery.min.js?somefile,otherfile.min,thirdfile"></script>
* <script src="/other/path/foo.js?different.file,final.file"></script>
* This script will "backload" the following files:
* /path/to/somefile.js
* /path/to/otherfile.min.js
* /path/to/thirdfile.js
* /other/path/different.file.js
* /other/path/final.file.js
*/

// And if you declare a function named "onBackload", it will be fired when all the scripts are loaded
// This is handy for getting things going once you're confident your scripts have all been included.
function onBackload(loaded){
alert('All ' + loaded + ' files backloaded!')
}
</pre>

== DOM Manipulation ==
=== Einfaches Rollover Hide Show Skript ===

<pre>
<script type="text/javascript">
/*<![CDATA[*/

/*]]>*/
</script>
</pre>

Siehe auch: [[Media:Maphilight-sample01.zip]]‎

Hinweis: damit fadeIn oder show funktionieren indem jQuery den Stil display: none und display: block hinzufügt. Eventuell muß das Element zuerst mit hide() o.ä. versteckt werden. Z.B.:
$(".myElement").hide().fadeIn(500);
vorsicht mit visibility: hidden im CSS. Dies führt dazu, daß man das Element trotz show() nicht sieht.

===Append Site Overlay DIV===

Quelle: http://css-tricks.com/snippets/jquery/append-site-overlay-div/ (11/2011)

<pre>
$(function() {

var docHeight = $(document).height();

$("body").append("<div id='overlay'></div>");

$("#overlay")
.height(docHeight)
.css({
'opacity' : 0.4,
'position': 'absolute',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000
});

});
</pre>
=== jQuery - overlay, modal box, lightbox, tooltips ===
Infos über die verschiedenen Möglichkeiten und die Unterschiede (Todo)

Beispiele:

=== Position eines Elements auslesen ===

<pre>
// get Pos of act Item
var position = $("#myElement").offset();
//console.log(position);

//set positon to other elements...
$("#otherElement").css(position);
$("#anotherElement").css("top",(position.top+5));

</pre>

== Usability ==
=== Loading Icon bis Seite komplett geladen ist ===
Quelle: siehe Links

<pre>
<head>
<meta charset='UTF-8'>
<title>Simple Loader</title>
<style>
/* This only works with JavaScript,
if it's not present, don't show loader */
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script src="https://github.com/Modernizr/Modernizr/raw/master/modernizr.js"></script>
<script>
// Wait for window load
$(window).load(function() {
// Animate loader off screen
$("#loader").animate({
top: -200
}, 1500);
});
</script>
</head>

<body>
<img src="download.png" id="loader">
<img src="http://farm6.static.flickr.com/5299/5400751421_55d49b2786_o.jpg">
</body>

</pre>

JavaScript - Arrays

2013-09-27T09:12:29Z

79.240.52.209: /* Mit Array arbeiten */

== Links ==
http://www.w3schools.com/js/js_obj_array.asp

== Arrays erzeugen ==

1: Regular:
var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";

2: Condensed:
var myCars=new Array("Saab","Volvo","BMW");

3: Literal:
var myCars=["Saab","Volvo","BMW"];

== Mit Array arbeiten ==
// Werte abrufen und setzen
var name=myCars[0];
myCars[0]="Opel";

// Unterschiedliche Objekte in einem Array
myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;

// Vordefinierte Methoden und Eigenschaften in einem Array
var x=myCars.length // the number of elements in myCars
var y=myCars.indexOf("Volvo") // the index position of "Volvo"

<pre>
// eigene Methoden mit prototype erzeugen
Array.prototype.ucase=function()
{
for (i=0;i<this.length;i++)
{this[i]=this[i].toUpperCase();}
}
</pre>

JavaScript - Arrays

2013-09-27T09:11:50Z

79.240.52.209: Die Seite wurde neu angelegt: „ == Links == http://www.w3schools.com/js/js_obj_array.asp == Arrays erzeugen == 1: Regular: var myCars=new Array(); myCars[0]="Saab"; myCars[1]="Vol…“

== Links ==
http://www.w3schools.com/js/js_obj_array.asp

== Arrays erzeugen ==

1: Regular:
var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";

2: Condensed:
var myCars=new Array("Saab","Volvo","BMW");

3: Literal:
var myCars=["Saab","Volvo","BMW"];

== Mit Array arbeiten ==

var name=myCars[0];
myCars[0]="Opel";

// Unterschiedliche Objekte in einem Array
myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;

// Methoden und Eigenschaften in einem Array
var x=myCars.length // the number of elements in myCars
var y=myCars.indexOf("Volvo") // the index position of "Volvo"

<pre>
// eigene Methoden mit prototype erzeugen
Array.prototype.ucase=function()
{
for (i=0;i<this.length;i++)
{this[i]=this[i].toUpperCase();}
}
</pre>

JavaScripts - Basics

2013-09-27T09:06:22Z

79.240.52.209: Die Seite wurde neu angelegt: „JavaScript - Arrays“

[[JavaScript - Arrays]]

JavaScript - Snippets

2013-09-27T09:05:57Z

79.240.52.209: /* Links */

== Links ==
[[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>

== 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>

== 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 ==
=== 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>