Maurer New Media http://screeneyes.com/wordpress Wed, 15 Feb 2012 08:56:57 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 css basic http://screeneyes.com/wordpress/xhtml/css/css-basics/css-basic?utm_source=rss&utm_medium=rss&utm_campaign=css-basic http://screeneyes.com/wordpress/xhtml/css/css-basics/css-basic#comments Tue, 24 Jan 2012 12:41:48 +0000 admin http://screeneyes.com/wordpress/?p=896 css basics delete

 

]]> http://screeneyes.com/wordpress/xhtml/css/css-basics/css-basic/feed 0 html adv1 http://screeneyes.com/wordpress/xhtml/html/html-advanced/html-adv1?utm_source=rss&utm_medium=rss&utm_campaign=html-adv1 http://screeneyes.com/wordpress/xhtml/html/html-advanced/html-adv1#comments Tue, 24 Jan 2012 12:41:30 +0000 admin http://screeneyes.com/wordpress/?p=894 delete

]]> http://screeneyes.com/wordpress/xhtml/html/html-advanced/html-adv1/feed 0 XML – Tutorial http://screeneyes.com/wordpress/xml/xml-xml/xml-tutorial?utm_source=rss&utm_medium=rss&utm_campaign=xml-tutorial http://screeneyes.com/wordpress/xml/xml-xml/xml-tutorial#comments Wed, 18 Jan 2012 15:49:41 +0000 admin http://screeneyes.com/wordpress/?p=870 Weiterlesen →]]> XML Vorrausetzung

Bevor du weiterfährst solltest du schon HTML und Javascript können.

Was ist XML

  • XML steht für Extensible Markup Language
  • XML wurde entwickelt, um Daten zu speichen, transportieren und abfragen
  • HTML dagegen wurde entwickelt, um Daten anzuzeigen
  • XML ist auch eine Markup Sprache ähnlich wie HTML
  • XML Tags sind nicht vorgegen, mann muss sie selber erfinden
  • XML sollte ziemlich selbsterklärend sein
  • XML wird von W3C empfohlen
  • XML ist eine sehr wichtige Grundlage, und einfach zu erlernen

XML macht NICHTS!

XML ist einfach eine Datei, die macht nichts, sie rechnet nicht, sie hat keine Funktionen, keine Methoden und auch sonst nichts. XML wurde einfach nur entwickelt, um Daten zu speichen, transportieren oder abzufragen und diesen Daten eine Struktur zu geben.

Folgendes Beispiel könnten gespeicherte Informationen von einer "unbekannten" Nachricht art sein:

Aud diesem Beispiel, versteht man alles, aber es macht nichts. Es sind nur Informationen in von persönlich selbst erstellten tags. Ich könnte jetzt auch noch eine Software Programmieren, die diese Informationen nimmt und Sie richtig anzeigt, oder auch solche Informationen senden und empfangen kann.

Warum XML?

Das grösste Problem der IT-Branche ist es Daten zwischen nicht Kompatiblen programmen auszutauschen. Um das in Zukunft zu vermeiden, sollten alle XML nutzen um einfach Daten zu speichern. XML Daten kann man als Beispiel mit Javascript auslesen und in HTML anzeigenlassen. XML soll einfach nur eine einfache schnelle tolle Art um Daten zu speichern sein.

]]> http://screeneyes.com/wordpress/xml/xml-xml/xml-tutorial/feed 0 jQuery – AJAX http://screeneyes.com/wordpress/browser-scripting/jquery/jquery-ajax?utm_source=rss&utm_medium=rss&utm_campaign=jquery-ajax http://screeneyes.com/wordpress/browser-scripting/jquery/jquery-ajax#comments Wed, 18 Jan 2012 08:40:51 +0000 admin http://screeneyes.com/wordpress/?p=855 To DO!!

]]> http://screeneyes.com/wordpress/browser-scripting/jquery/jquery-ajax/feed 0 jQuery – CSS Manipulation http://screeneyes.com/wordpress/browser-scripting/jquery/jquery-css-manipulation?utm_source=rss&utm_medium=rss&utm_campaign=jquery-css-manipulation http://screeneyes.com/wordpress/browser-scripting/jquery/jquery-css-manipulation#comments Wed, 18 Jan 2012 08:40:02 +0000 admin http://screeneyes.com/wordpress/?p=853 Weiterlesen →]]> jQuery CSS Manipulation

jQuery besitzt eine wichtige Methode um CSS zu manipulieren css(). Folgende optionen stehen zur verfügung:

Syntax:

Syntax Beschreibung
css(name) Gibt den Wert der Eigenschaft zurück
css(name,value) Fügt einem HTML Element eine CSS Eigenschaft und Wert hinzu
css({properties}) Fügt mehrere CSS Eigenschaften und Werte hinzu.
$(selector).height(value) Setzt den Wert für die höche, zu dem selektiertem Element
$(selector).width(value) Setzt den Wert für die länge, zu dem selektiertem Element

Beispiel:

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
	$("p#1").html($("div#div1").css("background-color"));
    $("p#2").css("background-color","yellow");
    $("p#3").css({"background-color":"yellow","font-size":"200%"});
	$("#div2").height("200px");
  });
});
</script>
</head>

<body>
<div id="div1" style="width:100px;height:100px;background:#ff0000"></div>
<p id="1">Hier kommt der Wert der Farbe vom Div!</p>
<p id="2">Der nr 2 Paragraph wird gelb.</p>
<p id="3">Der nr 3 Paragraph wird gelb und 200px.</p>
<div id="div2" style="background:green;height:100px;width:100px">Tutorial</div>
<button>klick mich</button>
</body>
</html>


</head>
<body>
</body>
</html>

]]> http://screeneyes.com/wordpress/browser-scripting/jquery/jquery-css-manipulation/feed 0 jQuery – HTML Manipulation http://screeneyes.com/wordpress/browser-scripting/jquery/jquery-html-manipulation?utm_source=rss&utm_medium=rss&utm_campaign=jquery-html-manipulation http://screeneyes.com/wordpress/browser-scripting/jquery/jquery-html-manipulation#comments Wed, 18 Jan 2012 08:12:38 +0000 admin http://screeneyes.com/wordpress/?p=851 Weiterlesen →]]> jQuery HTML Manipulation

jQuery hat mächtige Funktionen, um HTML Elemente und Attribute zu manipulieren. Mit folgenden Beispielen werden wird Text in ein <p> Tag ersetzen, einfügen oder hinten ran stelln und so weiter probiert es selber aus.

Syntax:

Syntax Beschreibung
$(selector).html(content) Ersetzt den code/text innerhalb des tags
$(selector).append(content) Fügt text am Ende innerhalb des tags hinzu
$(selector).prepend(content) Fügt text am Anfang innerhalb des tags hinzu
$(selector).after(content) Fügt text ausserhalb nach dem tag hinzu
$(selector).before(content) Fügt text ausserhalb vor dem tag hinzu

Beispiel:

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p#1").html("jQuery Tutorial");
	$("p#2").append("jQuery deutsch");
	$("p#3").after("lerne und lernen");
  });
});
</script>
</head>

<body>
<h2>der Titel</h2>
<p id="1">Der nr 1 Paragraph.</p>
<p id="2">Der nr 2 Paragraph.</p>
<p id="3">Der nr 3 Paragraph.</p>
<button>klick mich</button>
</body>
</html>


</head>
<body>
</body>
</html>

]]> http://screeneyes.com/wordpress/browser-scripting/jquery/jquery-html-manipulation/feed 0 jQuery – Callback http://screeneyes.com/wordpress/browser-scripting/jquery/jquery-callback?utm_source=rss&utm_medium=rss&utm_campaign=jquery-callback http://screeneyes.com/wordpress/browser-scripting/jquery/jquery-callback#comments Tue, 17 Jan 2012 15:20:48 +0000 admin http://screeneyes.com/wordpress/?p=845 Weiterlesen →]]> Jquery Callback Funktionen

Javascript Befehle werden Line für Linie ausgeführt. Bei Animationen, wird die nächste Zeile ausgeführt, obwohl die Animation noch nicht fertig ist. Das könnte ein Error erzeugen und damit das nicht passiert gibt es die Callback Funktion. Eine Callback Funktion wird erst ausgeführt wenn die Animation fertig ist.

Folgendes Beispiel ohne Callback, zeigt die Alertbox bevor die Animation fertig ist. (fehlerhaft)

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
    alert("Der Paragraph ist jetzt weg!");
  });
});
</script>
</head>
<body>
<button>Verstecken</button>
<p>Das ist ein Paragraph.</p>
</body>
</html>

Folgendes Beispiel mit Callback, zeigt die Alertbox erst nachdem die Animation fertig ist. (richtig)

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000,function(){
      alert("Der Paragraph ist jetzt weg!");
    });
  });
});
</script>
</head>
<body>
<button>Verstecken</button>
<p>Das ist ein Paragraph.</p>
</body>
</html>

]]> http://screeneyes.com/wordpress/browser-scripting/jquery/jquery-callback/feed 0 jQuery – Events http://screeneyes.com/wordpress/browser-scripting/jquery/jquery-events-2?utm_source=rss&utm_medium=rss&utm_campaign=jquery-events-2 http://screeneyes.com/wordpress/browser-scripting/jquery/jquery-events-2#comments Tue, 17 Jan 2012 15:18:21 +0000 admin http://screeneyes.com/wordpress/?p=843 Weiterlesen →]]> Jquery Event Funktionen

In Jquery wird man fast immer Event Handling Funktionen benutzen. Event handlers sind Methoden, die aufgerufen werden, wenn etwas in HTML passiert. Im Englishen hört man oft das eine Aktion ausgelöst(triggered) oder abgefeuert(fired) von einem Event.

Im folgenden Beispiel wird eine Funktion ausgeführt, sobald der Klick Event statt gefunden hat. In der Funktion wird die Methode hide ausgeführt.

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>

<script type="text/javascript">
$(document).ready(function() {
    $("button").click(function() {
		$("p").hide();
	});
});
</script>

</head>
<body>
<p>Der Titel</p>
<p>der 1. Paragraph</p>
<p>der 2. Paragraph</p>
<button>Klick mich!</button>
</body>
</html>

Jquery Namens Konflikt

Jquery nutzt das Dollar Symbol $ als Abkürzung für JQuery. Allerdings gibt es auch andere Javascript Bibliotheken die auch das Dollar Symbol verwenden. Damit man trotzdem beide Bibliotheken verwenden kann, gibt es in Jquery die Methode NoConflict(). Mit dieser Methode, kann man Jquery eine andere abkürzung zuweisen, wie jq anstatt $.

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>

<script type="text/javascript">
var jq=jQuery.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").hide();
  });
});
</script>

</head>
<body>
<p>Der Titel</p>
<p>der 1. Paragraph</p>
<p>der 2. Paragraph</p>
<button>Klick mich!</button>
</body>
</html>

Jquery Events

Event Methode Beschreibung
$(document).ready(function) Ready Event
$(selektor).click(function) Klick Event
$(selektor).dblclick(function) doppel Klick Event
$(selektor).focus(function) Focus Event
$(selektor).mouseover(function) Mausover Event
]]> http://screeneyes.com/wordpress/browser-scripting/jquery/jquery-events-2/feed 0 jQuery Effekte http://screeneyes.com/wordpress/browser-scripting/jquery/jquery-effekte?utm_source=rss&utm_medium=rss&utm_campaign=jquery-effekte http://screeneyes.com/wordpress/browser-scripting/jquery/jquery-effekte#comments Tue, 17 Jan 2012 15:14:01 +0000 admin http://screeneyes.com/wordpress/?p=840 Weiterlesen →]]> Jquery Hide, Show und Toggle

Mit Jquery, kann man HTML Elemente verstecken und anzeigen mit der Hide und Show Methode. Beide Methoden haben zwei optionale Parameter: Geschwindikeit und Callback. Toggle bedeutet, dass wenn hide ausgeführt wurde, show kommt und wenn show kam, wieder hide kommt.

$(selector).hide(speed, callback)
$(selector).show(speed, callback)
$(selector).toggle(speed, callback)

Der Speed Parameter, bestimmt die geschwindikeit vom verstecken/zeigen. Es gibt folgende Werte slow, fast, normal und milisekunden.

Der Callback Parameter, ist der Name einer Funktion, die ausgeführt wird, nachdem die hide/show Methode abgeschlossen ist.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>

<script type="text/javascript">
$(document).ready(function(){
	$("#weg").click(function(){
		$("p").hide();
	});
	$("#hier").click(function(){
    	$("p").show();
 	});
	$("#wechsel").click(function(){
    	$("p#p2").toggle("slow")();
 	});
});
</script>

</head>
<body>
<p>Wenn du auf verstecken klickst, wird das &lt;p&gt; Element 
samt Inhalt "gelöscht".</p>
<p id="p2">Klick auf Langsam abwechseln, dort ist auch das Attribut slow dabei.</p>
<button id="weg">Verstecken</button>
<button id="hier">Zeigen</button>
<button id="wechsel">Langsam abwechseln</button>
</body>
</html>

Jquery slideDown, Slideup und slideToggle

Die Jquery Slide Methoden, ändern die Höche von den Selektierten Elementen. Es gibt folgende Slide Methoden:

$(selector).slideDown(speed, callback)
$(selector).slideUp(speed, callback)
$(selector).slideToggle(speed, callback)

Die Parameter sind gleich wie den Hide/Show Methoden. Als Speed: slow,fast, normal oder milisekunden. Bei Callback, kann man der Name einer Funktion reinschreiben, die ausgeführt wird, wenn der slide fertig ist.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>

<script type="text/javascript"> 
$(document).ready(function(){
  $(".zeigebtn").click(function(){
    $(".inhalt").slideDown("slow");
  });
});
</script>
 
<style type="text/css"> 
div.inhalt,p.zeigebtn
{
padding:5px;
text-align:center;
background:#CCC;
}
div.inhalt
{
height:120px;
display:none;
}
</style>
</head>
<body>

<div class="inhalt">
<p>Hier lernst du schnell und effektiv Jquery. So einfach konnte man noch nie auf Deutsch Jquery lernen. Yiiipiiee und so weiter ;) </p>
</div>
 
<p class="zeigebtn">Zeige Inhalt</p>
 
</body>
</html>

Jquery fadeIn, fadeOut und fadeTo

Die Jquery Fade Methoden, gibt es um die Sichtbarkeit von HTML Elementen zu verändern.

$(selector).fadeIn(speed, callback)
$(selector).fadeOut(speed, callback)
$(selector).fadeTo(speed, opacity, callback)

Mit dem neuen Parameter "opacity" kann man festlegen wie hoch der Alpha Wert sein soll, anderst gesagt wie fest es verblassen soll.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").fadeTo("slow",0.25);
  });
});
</script>
</head>

<body>
<div style="background:green;width:250px;height:250px">
<button>Klicke zum Faden</button>
</div>
</body>
</html>

Jquery eigene Animation

Natürlich kann man auch eigene Animationen erstellen und nicht nur die vorgefertigten Funktionen von Jquery aufrufen.

$(selector).animate({params},[duration],[easing],[callback])

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>

<script type="text/javascript"> 
$(document).ready(function(){
  $("button").click(function(){
	  //Andere möglichkeit wäre sowas wie
	  //$("div").animate({height:300, width:300},"slow");
	  //aber spielt selber damit herum
    $("div").animate({height:300},"slow");
    $("div").animate({width:300},"slow");
    $("div").animate({height:100},"slow");
    $("div").animate({width:100},"slow");
  });
});
</script> 
</head>
 
<body>
<button>Start Animation</button>
<br /><br />
<div style="background:#98bf21;height:100px;width:100px;position:relative">
</div>
</body>
</html>

Jquery Effekte

In folgender Tabelle habt ihr ein paar Beispiele für Jquery Effekte:

Funktion Beschreibung
$(selector).hide() Versteckt das selektierte Element
$(selector).show() Zeigt das selektierte Element
$(selector).toggle() Wechelt das selektierte Element zwischen hide und show
$(selector).slideDown() Zieht das selektierte Element nach unten
$(selector).slideUp() Zieht das selektierte Element nach oben
$(selector).slideToggle() Wechselt, zwischen slideDown und slideUp
$(selector).fadeIn() Gibt farbe zurück, zu dem selektierten Element
$(selector).fadeOut() verblasst das selektierte Element
$(selector).fadeTo() verblasst das selektierte Element zu einem bestimmten Wert
$(selector).animate() Führt eine definierte Animation auf ein selektiertes Element aus.
]]> http://screeneyes.com/wordpress/browser-scripting/jquery/jquery-effekte/feed 0 jQuery Events http://screeneyes.com/wordpress/browser-scripting/jquery/jquery-events?utm_source=rss&utm_medium=rss&utm_campaign=jquery-events http://screeneyes.com/wordpress/browser-scripting/jquery/jquery-events#comments Tue, 17 Jan 2012 10:22:58 +0000 admin http://screeneyes.com/wordpress/?p=836 Weiterlesen →]]> Jquery Event Funktionen

In Jquery wird man fast immer Event Handling Funktionen benutzen. Event handlers sind Methoden, die aufgerufen werden, wenn etwas in HTML passiert. Im Englishen hört man oft das eine Aktion ausgelöst(triggered) oder abgefeuert(fired) von einem Event.

Im folgenden Beispiel wird eine Funktion ausgeführt, sobald der Klick Event statt gefunden hat. In der Funktion wird die Methode hide ausgeführt.

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>

<script type="text/javascript">
$(document).ready(function() {
    $("button").click(function() {
		$("p").hide();
	});
});
</script>

</head>
<body>
<p>Der Titel</p>
<p>der 1. Paragraph</p>
<p>der 2. Paragraph</p>
<button>Klick mich!</button>
</body>
</html>

Jquery Namens Konflikt

Jquery nutzt das Dollar Symbol $ als Abkürzung für JQuery. Allerdings gibt es auch andere Javascript Bibliotheken die auch das Dollar Symbol verwenden. Damit man trotzdem beide Bibliotheken verwenden kann, gibt es in Jquery die Methode NoConflict(). Mit dieser Methode, kann man Jquery eine andere abkürzung zuweisen, wie jq anstatt $.

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>

<script type="text/javascript">
var jq=jQuery.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").hide();
  });
});
</script>

</head>
<body>
<p>Der Titel</p>
<p>der 1. Paragraph</p>
<p>der 2. Paragraph</p>
<button>Klick mich!</button>
</body>
</html>

Jquery Events

Event Methode Beschreibung
$(document).ready(function) Ready Event
$(selektor).click(function) Klick Event
$(selektor).dblclick(function) doppel Klick Event
$(selektor).focus(function) Focus Event
$(selektor).mouseover(function) Mausover Event
]]> http://screeneyes.com/wordpress/browser-scripting/jquery/jquery-events/feed 0