JavaScript & jQuery
Upcoming SlideShare
Loading in...5
×
 

JavaScript & jQuery

on

  • 4,959 views

Einführung in JavaScript und jQuery

Einführung in JavaScript und jQuery

Statistics

Views

Total Views
4,959
Views on SlideShare
4,839
Embed Views
120

Actions

Likes
1
Downloads
68
Comments
0

4 Embeds 120

http://know.namics.com 65
https://know.namics.com 46
http://www.slideshare.net 8
http://www.slideee.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Partner Arbeit, Recherche über Geltungsbereiche.
  • Partner Arbeit, Recherche über Geltungsbereiche.
  • Partner Arbeit, Recherche über Geltungsbereiche.
  • Partner Arbeit, Recherche über Geltungsbereiche.
  • Partner Arbeit, Recherche über Geltungsbereiche.
  • Partner Arbeit, Recherche über Geltungsbereiche.
  • Partner Arbeit, Recherche über Geltungsbereiche.
  • Partner Arbeit, Recherche über Geltungsbereiche.
  • Partner Arbeit, Recherche über Geltungsbereiche.
  • Partner Arbeit, Recherche über Geltungsbereiche.
  • Partner Arbeit, Recherche über Geltungsbereiche.
  • Partner Arbeit, Recherche über Geltungsbereiche.
  • Partner Arbeit, Recherche über Geltungsbereiche.
  • Partner Arbeit, Recherche über Geltungsbereiche.
  • Partner Arbeit, Recherche über Geltungsbereiche.
  • Partner Arbeit, Recherche über Geltungsbereiche.
  • Partner Arbeit, Recherche über Geltungsbereiche.
  • Partner Arbeit, Recherche über Geltungsbereiche.
  • Partner Arbeit, Recherche über Geltungsbereiche.
  • Partner Arbeit, Recherche über Geltungsbereiche.
  • Partner Arbeit, Recherche über Geltungsbereiche.
  • Partner Arbeit, Recherche über Geltungsbereiche.
  • Partner Arbeit, Recherche über Geltungsbereiche.
  • Partner Arbeit, Recherche über Geltungsbereiche.
  • Partner Arbeit, Recherche über Geltungsbereiche.
  • Partner Arbeit, Recherche über Geltungsbereiche.

JavaScript & jQuery JavaScript & jQuery Presentation Transcript

  • create life. JavaScript Einführung © 2009 by noel bossart
  • Syntax JavaScript lehnt sich in der Syntax stark an C, C++ und Java an. Wichtige Grundregeln: JavaScript beachtet Gross- und Kleinschreibung Befehle werden in JavaScript mit einem Semicolon abgeschlossen Leerzeichen & Tabulatoren werden Ignoriert Es gibt wie in Java die Möglichkeit /* für mehrzeilige Kommentare */ und // für einzeilige Kommentare © 2009 by noel bossart
  • JavaScript ausführen Es gibt verschiedene Möglichkeiten JavaScript auszuführen: Eingebettet in einem Link im HTML (oder über die Adresszeile des Browsers) Durch ein Event-Attribut in einem HTML Tag Durch Scripte, welche direkt im HTML eingebettet sind Durch verlinkte Dateien im Head © 2009 by noel bossart View slide
  • JavaScript in Links Es ist möglich, JavaScript per URL... ...oder über einen Link auszuführen: <a href="javascript: alert('hello');"> Klicke hier für "Hallo" </a> © 2009 by noel bossart View slide
  • JavaScript direkt im Code JavaScript kann über HTML-Attribute bestimmten “Events” zugeordnet werden. Dies ist vergleichbar mit Inline-CSS. <div onmouseover="javascript:alert('hello');"> Reagiert beim Darüberfahren... </div> © 2009 by noel bossart
  • JavaScript direkt im Code JavaScript kann aber auch als ganzer Block im HTML aufgeführt werden. Dies gleicht CSS welches direkt im Head eingefügt wurde. Es wird ausgeführt, sobald der entsprechende Code geladen wurde: <body> ... <script type="text/javascript" charset="utf-8"> alert('hello'); </script> ... </body> © 2009 by noel bossart
  • JavaScript eingebunden im Head JavaScript kann wie CSS in externe Dateien ausgelagert werden. Dies bringt die selben Vorteile wie externes CSS: <head> ... <script src="external_js.js" type="text/javascript" charset="utf-8"> </script> ... </head> © 2009 by noel bossart
  • Bitte warten. JavaScript kann erst mit den Elementen einer Seite agieren, wenn diese geladen sind. Ist das JavaScript im Head der Seite eingebunden, muss der window.onload() Event des Fensters abgefangen werden. window.onload = function() { /* Anweisung */ } © 2009 by noel bossart
  • Variabeln Variabeln werden mit der var Anweisung erstellt. Wenn eine Variabel ohne var aufgerufen wird, wird sie von JavaScript automatisch angelegt. Eine so angelegte Variabel ist jedoch global! Da möglichst wenig globale Objekte und Variabeln erstellt werden sollten, ist es am besten, Variabeln immer mit var zu Deklarieren: var anzahl = 5; var element = document.getElementById(‘main’); © 2009 by noel bossart
  • Variabeln Es können mehrere Variabeln auf einmal deklariert werden: var anzahl = 5, text = ‘hello’, z = 12+3; © 2009 by noel bossart
  • Datentypen Eine Variabel enthält einen Wert von einem bestimmten Datentyp. Im Gegensatz zu anderen Sprachen, muss der Datentyp bei der Deklaration der Variabel nicht angegeben werden denn JavaScript ist eine lose typisierte Sprache. Es gibt in JavaScript drei Datentypen: number (5, 5.7, 5e2, 0.736, 5000) boolean (true, false) string (“Hallo” + name, “5”) © 2009 by noel bossart
  • Datentyp ermitteln Mit der Funktion typeof(Variabel) kann der Dateityp einer Variabel ermittelt werden: var unknown = 5.7; unknown = toString(unknown); alert(“Der Datentyp ist: “ + typeof(unknown)); © 2009 by noel bossart
  • Objekte Ein Objekt ist ein zusammengesetzte Datentyp, der eine beliebige Anzahl von Eigenschaften enthalten kann. Objekte können als ungeordnete Sammlung von Eigenschaften betrachtet werden, die jeweils einen Namen und einen Wert haben. Objekte können ihrerseits weitere Objekte enthalten Auch DOM-Objekte, Funktionen und Arrays sind Objekte © 2009 by noel bossart
  • Objekte Objekte können mittels des new Befehls erstellt werden: var myObject = new Object(); Objekte können – ähnlich wie Arrays – auch durch geschweifte Klammern erzeugt werden: var myObject = {}; © 2009 by noel bossart
  • Objekte Objekte können beliebige Werte enthalten: var book = new Object(); book.title = "Herr der Ringe"; book.stock = 764; book.soldOut = false; © 2009 by noel bossart
  • Objekte Genau das Selbe: var book = new Object(); book["title"] = "Herr der Ringe"; book["stock"] = 764; book["soldOut"] = false; © 2009 by noel bossart
  • Objekte Das gleiche Objekt kann auch wie folgt geschrieben werden: var book = { title: "Herr der Ringe", stock: 764, soldOut: false }; © 2009 by noel bossart
  • Objekte Bei der letzten Notationsmöglichkeit ist es sehr wichtig, dass das letzte Komma weggelassen wird! Der IE wirft sonst einen schwer nachvollziehbaren Fehler! var book = { title: "Herr der Ringe", stock: 764, soldOut: false }; © 2009 by noel bossart
  • Objekte Bei der letzten Notationsmöglichkeit ist es sehr wichtig, dass das letzte Komma weggelassen wird! Der IE wirft sonst einen schwer nachvollziehbaren Fehler! var book = { title: "Herr der Ringe", stock: 764, soldOut: false }; © 2009 by noel bossart
  • Objekte Ein Objekt kann mit einer for-in Schlaufe durchlaufen werden: for (var regal in book) { alert( regal + " = " +book[regal] ); } Ergibt: title = Herr der Ringe / stock = 764 / soldOut = false © 2009 by noel bossart
  • Aufgabe Erstelle drei Objekte vom typ fahrzeug welche die Eigenschaften typ (Flugzeug, Auto, Motorrad), marke (z.B: Boeing, Audi, Yahama), farbe (z.B: #f00, #0ff, #f0f), gewicht und preis (ohne CHF oder $) haben. Erstelle eine Funktion showFahrzeug(typ), welche alle Eigenschaften des Fahrzeugs eines bestimmten typs auflistet. Schreibe diese in einen DIV. © 2009 by noel bossart
  • Arrays Arrays sind nichts anderes als Objekte mit einer geordneten Folge von Werten. Statt Bezeichner (x, stock, myTime) bilden Zahlen den Index. Das erste Element hat den Index 0. Arrays können Objekte und Arrays enthalten. var books = new Array(); books[0] = "Herr der Ringe"; books[1] = 764; books[3] = false; © 2009 by noel bossart
  • Arrays Man kann das selbe auch so schreiben: var books = ["Herr der Ringe", 764, false ]; © 2009 by noel bossart
  • Arrays Arrays können mit einer bestimmten Anzahl Elemente erstellt werden. Jedes Array hat eine Eigenschaft length welche dessen Grösse zurückgibt: var books = new Array(10); alert("Anzahl Bücher: "+ books.length ); Dieser Code erzeigt ein Array mit 10 leeren Werten deren Anzahl danach über books.lenght und mit Funktion alert im Browser ausgegeben wird. © 2009 by noel bossart
  • Arrays Ein Array kann mit einer for Schlaufe durchlaufen werden: for( var i = 0; i < books.length; i++ ) { alert( "Buch NR.: "+i+ " heisst: " + books[ i ] ); } © 2009 by noel bossart
  • Aufgabe Erstelle ein Objekt garage welches mehrere fahrzeuge in einem Array zusammenfasst. Erstelle eine Funktion count() welche die Anzahl aller sich in der Garage befindlichen Fahrzeuge berechnet. Die Funktion wird über einen Link aufgerufen. © 2009 by noel bossart
  • Funktionen Wir erstellen eine Funktion (Name: css) welcher eine ID, eine CSS-Eigenschaft und ein zugehöriger Wert übergeben werden kann. Die Funktion wendet dann die CSS-Eigenschaft auf das Element mit der angegebenen ID an. Folgender Code dient zur Ausführung der Funktion: css(“hauptMenu”, “backgroundColor”, “black”); © 2009 by noel bossart
  • Funktionen Wir erstellen eine Funktion (Name: css) welcher eine ID, eine CSS-Eigenschaft und ein zugehöriger Wert übergeben werden kann. Die Funktion wendet dann die CSS-Eigenschaft auf das Element mit der angegebenen ID an. Folgender Code dient zur Ausführung der Funktion: css(“hauptMenu”, “backgroundColor”, “black”); © 2009 by noel bossart
  • Funktionen Wir erstellen eine Funktion (Name: css) welcher eine ID, eine CSS-Eigenschaft und ein zugehöriger Wert übergeben werden kann. Die Funktion wendet dann die CSS-Eigenschaft auf das Element mit der angegebenen ID an. Folgender Code dient zur Ausführung der Funktion: css(“hauptMenu”, “backgroundColor”, “black”); © 2009 by noel bossart
  • Funktionen Wir erstellen eine Funktion (Name: css) welcher eine ID, eine CSS-Eigenschaft und ein zugehöriger Wert übergeben werden kann. Die Funktion wendet dann die CSS-Eigenschaft auf das Element mit der angegebenen ID an. Folgender Code dient zur Ausführung der Funktion: css(“hauptMenu”, “backgroundColor”, “black”); © 2009 by noel bossart
  • Funktionen Wir erstellen eine Funktion (Name: css) welcher eine ID, eine CSS-Eigenschaft und ein zugehöriger Wert übergeben werden kann. Die Funktion wendet dann die CSS-Eigenschaft auf das Element mit der angegebenen ID an. Folgender Code dient zur Ausführung der Funktion: css(“hauptMenu”, “backgroundColor”, “black”); © 2009 by noel bossart
  • Funktionen Wir erstellen eine Funktion (Name: css) welcher eine ID, eine CSS-Eigenschaft und ein zugehöriger Wert übergeben werden kann. Die Funktion wendet dann die CSS-Eigenschaft auf das Element mit der angegebenen ID an. Folgender Code dient zur Ausführung der Funktion: css(“hauptMenu”, “backgroundColor”, “black”); © 2009 by noel bossart Was ist das?
  • Funktionen Wir erstellen eine Funktion (Name: css) welcher eine ID, eine CSS-Eigenschaft und ein zugehöriger Wert übergeben werden kann. Die Funktion wendet dann die CSS-Eigenschaft auf das Element mit der angegebenen ID an. Folgender Code dient zur Ausführung der Funktion: css(“hauptMenu”, “backgroundColor”, “black”); © 2009 by noel bossart Was ist das? Es sind Argumente
  • Funktionen Funktionen sind dazu da, eine Anzahl wiederkehrender Befehle zusammenzufassen um die Wieder- verwendbarkeit, die Wartbarkeit und die Übersicht des Codes zu erhöhen. function Funktionsname ( Argumente ) { Anweisungen; }; © 2009 by noel bossart
  • Funktionen Funktionen sind dazu da, eine Anzahl wiederkehrender Befehle zusammenzufassen um die Wieder- verwendbarkeit, die Wartbarkeit und die Übersicht des Codes zu erhöhen. function Funktionsname ( Argumente ) { Anweisungen; }; © 2009 by noel bossart
  • Funktionen Eine Funktion ist in JavaScript als Objekt umgesetzt. Daher kann eine Funktion wie ein Objekt erstellt werden: var Funktionsname = function( Argumente ) { Anweisungen }; © 2009 by noel bossart
  • Funktionen Eine Funktion ist in JavaScript als Objekt umgesetzt. Daher kann eine Funktion wie ein Objekt erstellt werden: var Funktionsname = function( Argumente ) { Anweisungen }; © 2009 by noel bossart
  • Code © 2009 by noel bossart
  • Code function css(id, css, wert){ } © 2009 by noel bossart
  • Code var css = function(id, css, wert){ } © 2009 by noel bossart
  • Code var css = function(id, css, wert){ } © 2009 by noel bossart
  • DOM Elemente: selektieren Das DOM ist wie ein Baum dargestellt bei dem jedes Element ein Eltern- und oft auch Kind- oder Geschwister- Elemente hat. Um auf DOM Elemente zuzugreifen müssen sie selektiert werden. Mit document.getElementById kann man ein Element anhand der ID selektieren: var elm = document.getElementById(‘myElement’); <div id=”myElement”>Some text</div> © 2009 by noel bossart
  • DOM Elemente: selektieren Das DOM ist wie ein Baum dargestellt bei dem jedes Element ein Eltern- und oft auch Kind- oder Geschwister- Elemente hat. Um auf DOM Elemente zuzugreifen müssen sie selektiert werden. Mit document.getElementById kann man ein Element anhand der ID selektieren: var elm = document.getElementById(‘myElement’); <div id=”myElement”>Some text</div> © 2009 by noel bossart
  • Code var css = function(id, css, wert){ document.getElementById(id); } © 2009 by noel bossart
  • Code var css = function(id, css, wert){ document.getElementById(id); } © 2009 by noel bossart
  • Code var css = function(id, css, wert){ var elm = document.getElementById(id); } © 2009 by noel bossart
  • Code var css = function(id, css, wert){ var elm = document.getElementById(id); } © 2009 by noel bossart
  • DOM Elemente: Eigenschaften Eine der wichtigsten Eigenschaften ist die “style” Eigenschaft (Attribut) mit der sich CSS-Styles auf ein Element anwenden lassen. Sie ist in Javascript als Objekt abgebildet und entsprich im Prinzip normalem CSS, wobei jedoch z.T. etwas andere Eigenschaftsnamen vorkommen: var elm = document.getElementById(‘myElement’); elm.style[‘color’] = “#fff”; elm.style.backgroundColor =”#000”; ...mehr auf Seite 77 in “JavaScript kurz & gut” © 2009 by noel bossart
  • DOM Elemente: Eigenschaften Eine der wichtigsten Eigenschaften ist die “style” Eigenschaft (Attribut) mit der sich CSS-Styles auf ein Element anwenden lassen. Sie ist in Javascript als Objekt abgebildet und entsprich im Prinzip normalem CSS, wobei jedoch z.T. etwas andere Eigenschaftsnamen vorkommen: var elm = document.getElementById(‘myElement’); elm.style[‘color’] = “#fff”; elm.style.backgroundColor =”#000”; ...mehr auf Seite 77 in “JavaScript kurz & gut” © 2009 by noel bossart
  • DOM Elemente: Eigenschaften Eine der wichtigsten Eigenschaften ist die “style” Eigenschaft (Attribut) mit der sich CSS-Styles auf ein Element anwenden lassen. Sie ist in Javascript als Objekt abgebildet und entsprich im Prinzip normalem CSS, wobei jedoch z.T. etwas andere Eigenschaftsnamen vorkommen: var elm = document.getElementById(‘myElement’); elm.style[‘color’] = “#fff”; elm.style.backgroundColor =”#000”; ...mehr auf Seite 77 in “JavaScript kurz & gut” © 2009 by noel bossart
  • Code var css = function(id, css, wert){ document.getElementById(id).style[css] = wert; } © 2009 by noel bossart
  • Code var css = function(id, css, wert){ document.getElementById(id).style[css] = wert; } © 2009 by noel bossart
  • Code var css = function(id, css, wert){ document.getElementById(id).style[css] = wert; } © 2009 by noel bossart
  • Code var css = function(id, css, wert){ var elm = document.getElementById(id); elm.style[css] = wert; } © 2009 by noel bossart
  • Code var css = function(id, css, wert){ var elm = document.getElementById(id); elm.style[css] = wert; } © 2009 by noel bossart
  • Code var css = function(id, css, wert){ var elm = document.getElementById(id); elm.style[css] = wert; } © 2009 by noel bossart
  • Code var css = function(id, css, wert){ var elm = document.getElementById(id); elm.style[css] = wert; } © 2009 by noel bossart
  • Code var css = function(id, css, wert){ var elm = document.getElementById(id); elm.style[css] = wert; } © 2009 by noel bossart
  • Code var css = function(id, css, wert){ var elm = document.getElementById(id); elm.style[css] = wert; } © 2009 by noel bossart
  • Code var css = function(id, css, wert){ var elm = document.getElementById(id); elm.style[css] = wert; } © 2009 by noel bossart
  • Code var css = function(id, css, wert){ document.getElementById(id).style[css] = wert; } © 2009 by noel bossart
  • write less. do more. jQuery Einführung
  • jQuery jQuery ist eine JavaScript Funktions-Bibliothek welche viele Dinge gegenüber “herkömmlichen” JavaScript vereinfacht. Es beinhaltet u.a. Funktionen für das einfache Selektieren von Elementen (Mit komplexen CSS Selektoren) sowie das Handhaben von Events. Ausserdem bringt es eine Reihe von Funktionen für das Animieren von Elementen und Unterstützung im Umgang mit AJAX Funktionalität mit. jQuery liegt als OpenSource und in minimierter Form auf www.jquery.com zur Verfügung. © 2009 by noel bossart
  • jQuery Grundlagen: Objekte Das gesamte jQuery Framework ist in 2 Objekten abgelegt: jQuery und $ Diese beiden Objekte sind identisch, es kann also – je nach Vorliebe – das $ oder das jQuery Objekt verwendet werden. © 2009 by noel bossart
  • document.ready Bei vielen Aufgaben muss man warten, bis das DOM geladen wurde. Dies wird normalerweise mit der window.onload() Funktion abgefangen. Aufgabe: Erstelle eine HTML Seite auf der ein sehr grosses Bild enthalten ist und daunter einen Text steht. Setze im Head ein JavaScript ein, welches ein alert() ausgibt, und einen weiteren alert() welcher in der window.onload() Funktion steht. © 2009 by noel bossart
  • document.ready Wir stellen fest, dass die window.onload() Funktion erst ausgeführt wird, sobald das grosse Bild geladen wurde. Obwohl der Text (und damit das DOM) eigentlich schon viel früher parat wäre und auf Manipulationen reagieren könnte. Dabei unterstützt uns jQuery mit der ready Funktion. Dazu wird das document mittels jQuery selektiert und darauf die ready Funktion ausgeführt – welcher eine weitere Funktion übergeben wird: $(document).ready( function() { // Alle weiteren Anweisungen. } ); © 2009 by noel bossart
  • document.ready Wir stellen fest, dass die window.onload() Funktion erst ausgeführt wird, sobald das grosse Bild geladen wurde. Obwohl der Text (und damit das DOM) eigentlich schon viel früher parat wäre und auf Manipulationen reagieren könnte. Dabei unterstützt uns jQuery mit der ready Funktion. Dazu wird das document mittels jQuery selektiert und darauf die ready Funktion ausgeführt – welcher eine weitere Funktion übergeben wird: $(document).ready( function() { Funktion ohne // Alle weiteren Anweisungen. Name } ); © 2009 by noel bossart
  • jQuery Grundlagen: Selektoren Man kann mit jQuery ganz einfach Elemente selektieren indem man einen CSS Selektor angibt: var elm = jQuery(‘#meinDiv’); // ist das Selbe wie: var elm = $(‘#meinDiv’); © 2009 by noel bossart
  • jQuery Grundlagen: Selektoren Man kann mit jQuery ganz einfach Elemente selektieren indem man einen CSS Selektor angibt: var elm = jQuery(‘#meinDiv’); // ist das Selbe wie: var elm = $(‘#meinDiv’); © 2009 by noel bossart
  • jQuery Grundlagen: Selektoren Man kann mit jQuery ganz einfach Elemente selektieren indem man einen CSS Selektor angibt: var elm = jQuery(‘#meinDiv’); // ist das Selbe wie: var elm = $(‘#meinDiv’); // ist das Selbe wie: var elm = document.getElementById(‘meinDiv’); © 2009 by noel bossart
  • jQuery Grundlagen: Selektoren Man kann mit jQuery ganz einfach Elemente selektieren indem man einen CSS Selektor angibt: var elm = jQuery(‘#meinDiv’); // ist das Selbe wie: var elm = $(‘#meinDiv’); // ist das Selbe wie: var elm = document.getElementById(‘meinDiv’); © 2009 by noel bossart
  • jQuery Grundlagen: Selektoren Es sind auch kompliziertere Selektoren möglich: var elm = $(‘#head ul li:not(.active) a’); Damit selektieren wir den Link in einer <ul/> <li/> Liste im Element mit id head, aber nur, wenn das <li/> nicht die Klasse active besitzt. Mehr dazu unter docs.jquery.com/Selectors © 2009 by noel bossart
  • jQuery Grundlagen: Selektoren Es sind auch kompliziertere Selektoren möglich: var elm = $(‘#head ul li:not(.active) a’); Damit selektieren wir den Link in einer <ul/> <li/> Liste im Element mit id head, aber nur, wenn das <li/> nicht die Klasse active besitzt. Mehr dazu unter docs.jquery.com/Selectors © 2009 by noel bossart
  • jQuery Grundlagen: Selektoren Um zu zeigen, dass es sich bei einer Variabel um ein jQuery Element handelt, empfehle ich, ein $ voranzustellen. Damit erkennt man im weiteren Verlauf des Codes, welche Variabeln jQuery Objekte enthalten. var $menu = $(‘#menu’); var $button = $(‘form#anmeldung button’); © 2009 by noel bossart
  • Funktionen als Objekte Funktionen sind in JavaScript nichts weiter als Objekte. Das heisst, sie können wie Objekte erstellt, und somit auch als Parameter an weitere Funktionen übergeben werden: var innereFunktion = function(){ alert(“ich wurde übergeben”); } function wrapper(inner){ inner(); } wrapper(innereFunktion); © 2009 by noel bossart
  • Funktionen als Objekte Funktionen sind in JavaScript nichts weiter als Objekte. Das heisst, sie können wie Objekte erstellt, und somit auch als Parameter an weitere Funktionen übergeben werden: var innereFunktion = function(){ alert(“ich wurde übergeben”); Inner Funktion wird deklariert (als Objekt) } function wrapper(inner){ inner(); } wrapper(innereFunktion); © 2009 by noel bossart
  • Funktionen als Objekte Funktionen sind in JavaScript nichts weiter als Objekte. Das heisst, sie können wie Objekte erstellt, und somit auch als Parameter an weitere Funktionen übergeben werden: var innereFunktion = function(){ alert(“ich wurde übergeben”); Inner Funktion wird deklariert (als Objekt) } function wrapper(inner){ inner(); Äussere Funktion wird deklariert } wrapper(innereFunktion); © 2009 by noel bossart
  • Funktionen als Objekte Funktionen sind in JavaScript nichts weiter als Objekte. Das heisst, sie können wie Objekte erstellt, und somit auch als Parameter an weitere Funktionen übergeben werden: var innereFunktion = function(){ alert(“ich wurde übergeben”); Inner Funktion wird deklariert (als Objekt) } function wrapper(inner){ inner(); Äussere Funktion wird deklariert } wrapper(innereFunktion); Äussere Funktion wird aufgerufen und die innere Übergeben © 2009 by noel bossart
  • Funktionen als Objekte Funktionen sind in JavaScript nichts weiter als Objekte. Das heisst, sie können wie Objekte erstellt, und somit auch als Parameter an weitere Funktionen übergeben werden: var innereFunktion = function(){ alert(“ich wurde übergeben”); } function wrapper(inner){ inner(); } wrapper(innereFunktion); © 2009 by noel bossart
  • Funktionen als Objekte Da sich Objekte verschachteln lassen, können Funktionen auch innerhalb von weiteren Objekten erstellt werden: var ui = { show: function(elm){ // Funktion “show” als Eigenschaft von “ui” elm.style[‘display’] = “”; }, hide: function(elm){ // Funktion “hide” als Eigenschaft von “ui” elm.style[‘display’] = “none”; } } ui.show( document.getElementById(‘subMenu’) ); // ui show aufrufen © 2009 by noel bossart
  • Funktionen als Objekte Da sich Objekte verschachteln lassen, können Funktionen auch innerhalb von weiteren Objekten erstellt werden: var ui = { show: function(elm){ // Funktion “show” als Eigenschaft von “ui” elm.style[‘display’] = “”; }, hide: function(elm){ // Funktion “hide” als Eigenschaft von “ui” elm.style[‘display’] = “none”; } } ui.show( document.getElementById(‘subMenu’) ); // ui show aufrufen © 2009 by noel bossart
  • Funktionen als Objekte Da sich Objekte verschachteln lassen, können Funktionen auch innerhalb von weiteren Objekten erstellt werden: var ui = { show: function(elm){ // Funktion “show” als Eigenschaft von “ui” elm.style[‘display’] = “”; }, hide: function(elm){ // Funktion “hide” als Eigenschaft von “ui” elm.style[‘display’] = “none”; } } ui.show( document.getElementById(‘subMenu’) ); // ui show aufrufen © 2009 by noel bossart
  • Attribute auslesen Mit jQuery kann man leicht Eigenschaften (Attribute) eines Elements auslesen. var $links = $(‘a.ext’); // selektiert alle Links mit der Klasse ext var link = $links.attr(‘href’); © 2009 by noel bossart
  • Attribute bearbeiten Mit jQuery kann man leicht Eigenschaften (Attribute) eines Elements bearbeiten. var $links = $(‘a.ext’); // selektiert alle Links mit der Klasse ext $links.attr(‘title’, ‘externer Link’); © 2009 by noel bossart
  • Attribute bearbeiten Da jQuery als verkettete Bibliothek angelegt ist, können mehrere Befehle aneinander gereiht werden: var $links = $(‘a.ext’); // selektiert alle Links mit der Klasse ext $links.attr(‘title’, ‘externer Link’).attr(‘target’, ‘_blank’); Mehr dazu unter docs.jquery.com/Attributes © 2009 by noel bossart
  • CSS jQuery bringt die css( ); Funktion mit, sie kann: Einzelne Eigenschaften auslesen (1 Parameter): $link.css(“color”); // gibt die aktuelle Farbe zurück Einzelne Eigenschaften schreiben (2 Parameter): $link.css(“color” , “blue”); /* gibt das jQuery Objekt zurück /* Mehrere Eigenschaften schreiben (Objekt) $link.css({ ‘color’: ‘blue’, ‘background’: ‘red’ }); /* gibt ebenfalls das jQuery Objekt zurück */ © 2009 by noel bossart
  • CSS Mit jQuery ist es leicht, CSS zu modifizieren. Mit der css Funktion kann man ganze Objekte mit CSS Code übergeben. var $hover = $(‘ul li a:hover’); $hover.css({ ‘color’: ‘blue’, ‘background’: ‘red’ }); © 2009 by noel bossart
  • CSS Mit jQuery ist es leicht, CSS zu modifizieren. Mit der css Funktion kann man ganze Objekte mit CSS Code übergeben. var $hover = $(‘ul li a:hover’); $hover.css({ ‘color’: ‘blue’, Objekt ‘background’: ‘red’ }); © 2009 by noel bossart
  • CSS Die Funktionen addClass und removeClass können CSS-Klassen setzen und entfernen: var $hover = $(‘ul li a:hover’); $hover.addClass(‘over’); Mehr dazu unter docs.jquery.com/CSS © 2009 by noel bossart
  • Klassen manipulieren Die Funktionen addClass(); und removeClass(); können CSS-Klassen setzen und entfernen: $hover.addClass(‘over’); // gibt dem Element die Klasse over $hover. removeClass(‘active’); // entfernt die Klasse active Die Funktionen toggleClass(); kann einem Element eine Klasse geben und wieder entfernen: $hover. toggleClass(‘over’); // gibt dem Element die Klasse over $hover. toggleClass(‘over’); // entfernt die Klasse over wieder © 2009 by noel bossart
  • HTML manipulieren jQuery bringt viele Funktionen zur DOM Manipulation mit. Darunter html( ); und text( ); welche es ermöglichen, Elemente und Inhalte zu schreiben und zu lesen: HTML auslesen (Kein Parameter): $head.html(); // gibt den Quellcode des #head DIV’s zurück HTML schreiben (1 Parameter): $head.html(“<img src=‘logo.gif’/>”); // schreibt ein Bild in #head © 2009 by noel bossart
  • HTML manipulieren jQuery bringt viele Funktionen zur DOM Manipulation mit. Darunter html( ); und text( ); welche es ermöglichen, Elemente und Inhalte zu schreiben und zu lesen: Text eines Elements auslesen (Kein Parameter): $link.text(); // gibt den Text im Link zurück Text in ein Element schreiben (1 Parameter): $link.html(“Home”); // schreibt den Text Home in den Link © 2009 by noel bossart
  • HTML manipulieren Mit append( ); und prepend( ); kann man Elemente und Texte innerhalb des selektierten Elements am Anfang (pre...) oder am Ende (app...) anfügen: var $div = $(‘div#main’); $div.append(‘<img src=”stern.gif” />’) Div mit der ID main © 2009 by noel bossart
  • HTML manipulieren Mit append( ); und prepend( ); kann man Elemente und Texte innerhalb des selektierten Elements am Anfang (pre...) oder am Ende (app...) anfügen: var $div = $(‘div#main’); $div.append(‘<img src=”stern.gif” />’) Div mit der ID main © 2009 by noel bossart
  • HTML manipulieren Mit append( ); und prepend( ); kann man Elemente und Texte innerhalb des selektierten Elements am Anfang (pre...) oder am Ende (app...) anfügen: var $div = $(‘div#main’); $div.prepend(‘<img src=”stern.gif” />’) Div mit der ID main © 2009 by noel bossart
  • HTML manipulieren Mit append( ); und prepend( ); kann man Elemente und Texte innerhalb des selektierten Elements am Anfang (pre...) oder am Ende (app...) anfügen: var $div = $(‘div#main’); $div.prepend(‘<img src=”stern.gif” />’) Div mit der ID main © 2009 by noel bossart
  • HTML manipulieren Mit append( ); und prepend( ); kann man Elemente und Texte innerhalb des selektierten Elements am Anfang (pre...) oder am Ende (app...) anfügen: var $div = $(‘div#main’); $div.prepend(‘<img src=”stern.gif” />’) Div mit der ID main © 2009 by noel bossart
  • HTML manipulieren Mit before( ); und after( ); ist es möglich, vor oder nach dem selektierten Element weitere Elemente einzufügen: var $div = $(‘div#main’); $div.before(‘<div id=”content”>Content</div>’); Div mit der ID main © 2009 by noel bossart
  • HTML manipulieren Mit before( ); und after( ); ist es möglich, vor oder nach dem selektierten Element weitere Elemente einzufügen: var $div = $(‘div#main’); $div.before(‘<div id=”content”>Content</div>’); Content Div mit der ID main © 2009 by noel bossart
  • HTML manipulieren Mit before( ); und after( ); ist es möglich, vor oder nach dem selektierten Element weitere Elemente einzufügen: var $div = $(‘div#main’); $div.after(‘<div id=”content”>Content</div>’); Div mit der ID main Mehr dazu unter docs.jquery.com/Manipulation © 2009 by noel bossart
  • HTML manipulieren Mit before( ); und after( ); ist es möglich, vor oder nach dem selektierten Element weitere Elemente einzufügen: var $div = $(‘div#main’); $div.after(‘<div id=”content”>Content</div>’); Div mit der ID main Content Mehr dazu unter docs.jquery.com/Manipulation © 2009 by noel bossart
  • Events jQuery bietet für viele Events entsprechende Handler an. Die gängigsten Events sind click( ); blur( ); und hover( ); sowie mouseover( ); und mouseout( );. Sie alle erwarten als Übergabeparameter eine Funktion $(‘a’).click( function(){ alert( ‘es wurde auf den link geklickt’ ); } ); © 2009 by noel bossart Mehr dazu unter http://docs.jquery.com/Events
  • Events jQuery bietet für viele Events entsprechende Handler an. Die gängigsten Events sind click( ); blur( ); und hover( ); sowie mouseover( ); und mouseout( );. Sie alle erwarten als Übergabeparameter eine Funktion $(‘a’).click( function(){ Der Funktion click( den linkeine Funktion übergben alert( ‘es wurde auf ); wird geklickt’ ); } ); © 2009 by noel bossart Mehr dazu unter http://docs.jquery.com/Events
  • Events Innerhalb einer Funktion kann man mit $(this) wieder auf des Element zugreifen welches den Event ausführt. Im folgenden Beispiel bezieht sich $(this) auf den selektierten Link und blendet ihn aus: $(‘a’).click( function(){ $(this).fadeOut( 1000 ); } ); © 2009 by noel bossart
  • Events Innerhalb einer Funktion kann man mit $(this) wieder auf des Element zugreifen welches den Event ausführt. Im folgenden Beispiel bezieht sich $(this) auf den selektierten Link und blendet ihn aus: $(‘a’).click( function(){ $(this).fadeOut( 1000 ); } ); © 2009 by noel bossart