JavaScript & jQuery

3,868 views
3,707 views

Published on

Einführung in JavaScript und jQuery

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,868
On SlideShare
0
From Embeds
0
Number of Embeds
125
Actions
Shares
0
Downloads
81
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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

    1. 1. create life. JavaScript Einführung © 2009 by noel bossart
    2. 2. 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
    3. 3. 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
    4. 4. 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
    5. 5. 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
    6. 6. 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
    7. 7. 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
    8. 8. 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
    9. 9. 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
    10. 10. Variabeln Es können mehrere Variabeln auf einmal deklariert werden: var anzahl = 5, text = ‘hello’, z = 12+3; © 2009 by noel bossart
    11. 11. 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
    12. 12. 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
    13. 13. 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
    14. 14. 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
    15. 15. 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
    16. 16. Objekte Genau das Selbe: var book = new Object(); book["title"] = "Herr der Ringe"; book["stock"] = 764; book["soldOut"] = false; © 2009 by noel bossart
    17. 17. Objekte Das gleiche Objekt kann auch wie folgt geschrieben werden: var book = { title: "Herr der Ringe", stock: 764, soldOut: false }; © 2009 by noel bossart
    18. 18. 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
    19. 19. 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
    20. 20. 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
    21. 21. 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
    22. 22. 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
    23. 23. Arrays Man kann das selbe auch so schreiben: var books = ["Herr der Ringe", 764, false ]; © 2009 by noel bossart
    24. 24. 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
    25. 25. 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
    26. 26. 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
    27. 27. 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
    28. 28. 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
    29. 29. 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
    30. 30. 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
    31. 31. 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
    32. 32. 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?
    33. 33. 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
    34. 34. 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
    35. 35. 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
    36. 36. 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
    37. 37. 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
    38. 38. Code © 2009 by noel bossart
    39. 39. Code function css(id, css, wert){ } © 2009 by noel bossart
    40. 40. Code var css = function(id, css, wert){ } © 2009 by noel bossart
    41. 41. Code var css = function(id, css, wert){ } © 2009 by noel bossart
    42. 42. 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
    43. 43. 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
    44. 44. Code var css = function(id, css, wert){ document.getElementById(id); } © 2009 by noel bossart
    45. 45. Code var css = function(id, css, wert){ document.getElementById(id); } © 2009 by noel bossart
    46. 46. Code var css = function(id, css, wert){ var elm = document.getElementById(id); } © 2009 by noel bossart
    47. 47. Code var css = function(id, css, wert){ var elm = document.getElementById(id); } © 2009 by noel bossart
    48. 48. 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
    49. 49. 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
    50. 50. 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
    51. 51. Code var css = function(id, css, wert){ document.getElementById(id).style[css] = wert; } © 2009 by noel bossart
    52. 52. Code var css = function(id, css, wert){ document.getElementById(id).style[css] = wert; } © 2009 by noel bossart
    53. 53. Code var css = function(id, css, wert){ document.getElementById(id).style[css] = wert; } © 2009 by noel bossart
    54. 54. Code var css = function(id, css, wert){ var elm = document.getElementById(id); elm.style[css] = wert; } © 2009 by noel bossart
    55. 55. Code var css = function(id, css, wert){ var elm = document.getElementById(id); elm.style[css] = wert; } © 2009 by noel bossart
    56. 56. Code var css = function(id, css, wert){ var elm = document.getElementById(id); elm.style[css] = wert; } © 2009 by noel bossart
    57. 57. Code var css = function(id, css, wert){ var elm = document.getElementById(id); elm.style[css] = wert; } © 2009 by noel bossart
    58. 58. Code var css = function(id, css, wert){ var elm = document.getElementById(id); elm.style[css] = wert; } © 2009 by noel bossart
    59. 59. Code var css = function(id, css, wert){ var elm = document.getElementById(id); elm.style[css] = wert; } © 2009 by noel bossart
    60. 60. Code var css = function(id, css, wert){ var elm = document.getElementById(id); elm.style[css] = wert; } © 2009 by noel bossart
    61. 61. Code var css = function(id, css, wert){ document.getElementById(id).style[css] = wert; } © 2009 by noel bossart
    62. 62. write less. do more. jQuery Einführung
    63. 63. 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
    64. 64. 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
    65. 65. 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
    66. 66. 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
    67. 67. 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
    68. 68. 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
    69. 69. 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
    70. 70. 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
    71. 71. 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
    72. 72. 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
    73. 73. 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
    74. 74. 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
    75. 75. 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
    76. 76. 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
    77. 77. 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
    78. 78. 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
    79. 79. 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
    80. 80. 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
    81. 81. 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
    82. 82. 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
    83. 83. 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
    84. 84. 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
    85. 85. 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
    86. 86. 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
    87. 87. 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
    88. 88. 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
    89. 89. 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
    90. 90. 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
    91. 91. 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
    92. 92. 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
    93. 93. 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
    94. 94. 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
    95. 95. 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
    96. 96. 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
    97. 97. 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
    98. 98. 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
    99. 99. 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
    100. 100. 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
    101. 101. 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
    102. 102. 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
    103. 103. 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
    104. 104. 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
    105. 105. 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

    ×