Suche senden
Hochladen
JavaScript & jQuery
•
Als ZIP, PDF herunterladen
•
1 gefällt mir
•
2,148 views
N
Noël Bossart
Folgen
Einführung in JavaScript und jQuery
Weniger lesen
Mehr lesen
Technologie
Diashow-Anzeige
Melden
Teilen
Diashow-Anzeige
Melden
Teilen
1 von 110
Jetzt herunterladen
Empfohlen
Die Kunst Des Software Design
Die Kunst Des Software Design
Stephan Schmidt
JavaFX - 9. JUGR Stammtisch - 5. Mai 2011
JavaFX - 9. JUGR Stammtisch - 5. Mai 2011
Reto Zahner
Genügend gute Gründe, wieso Ruby besser als PHP ist
Genügend gute Gründe, wieso Ruby besser als PHP ist
Daniel Spangenberg
Robo Memo Elpos Tagung
Robo Memo Elpos Tagung
luzius
Journalismus 2-0
Journalismus 2-0
Prof. Alexander Gerber
PresentacióN3
PresentacióN3
yariely concepcion
Formulare // MM 08-11
Formulare // MM 08-11
Noël Bossart
GRAFFITI.
GRAFFITI.
Elpajaroeslaclave
Empfohlen
Die Kunst Des Software Design
Die Kunst Des Software Design
Stephan Schmidt
JavaFX - 9. JUGR Stammtisch - 5. Mai 2011
JavaFX - 9. JUGR Stammtisch - 5. Mai 2011
Reto Zahner
Genügend gute Gründe, wieso Ruby besser als PHP ist
Genügend gute Gründe, wieso Ruby besser als PHP ist
Daniel Spangenberg
Robo Memo Elpos Tagung
Robo Memo Elpos Tagung
luzius
Journalismus 2-0
Journalismus 2-0
Prof. Alexander Gerber
PresentacióN3
PresentacióN3
yariely concepcion
Formulare // MM 08-11
Formulare // MM 08-11
Noël Bossart
GRAFFITI.
GRAFFITI.
Elpajaroeslaclave
N N E M Stammtisch 181109 2
N N E M Stammtisch 181109 2
Making Sense
Fundraising Isa 071009
Fundraising Isa 071009
guestf18693
Raumdesign Kidsrooms Kinderzimmer
Raumdesign Kidsrooms Kinderzimmer
mefire
Patientenvortrag Ankylos
Patientenvortrag Ankylos
Steuer
Hello World // MM 08-11
Hello World // MM 08-11
Noël Bossart
Neue Rhythmisierung am MSM
Neue Rhythmisierung am MSM
guest8e703e1
WissJour20
WissJour20
Prof. Alexander Gerber
Entwicklung deutscher Wissenschafts-Medien
Entwicklung deutscher Wissenschafts-Medien
Prof. Alexander Gerber
BdS - Garantieverzinsung: Der Große Bluff
BdS - Garantieverzinsung: Der Große Bluff
Hans Müller
Monthly report on de international sales september 2015
Monthly report on de international sales september 2015
WebInterpret SAS
PräSentation1
PräSentation1
Steuer
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
Noël Bossart
Umzug
Umzug
xandy80
Trendstudie Wissenschaftskommunikation (Ergebnisse des Experten-Delphis)
Trendstudie Wissenschaftskommunikation (Ergebnisse des Experten-Delphis)
Prof. Alexander Gerber
Irregular verbs
Irregular verbs
Nalan English
optivo - Torben Otto und René Kulka
optivo - Torben Otto und René Kulka
optivo GmbH
Formulare
Formulare
Noël Bossart
Xinnovations-2010
Xinnovations-2010
Prof. Alexander Gerber
Seminar: Tipps und Tricks für erfolgreiches Lifecycle-Marketing
Seminar: Tipps und Tricks für erfolgreiches Lifecycle-Marketing
optivo GmbH
Europäischer Verkaufsbeschleuniger - die Features
Europäischer Verkaufsbeschleuniger - die Features
WebInterpret SAS
JsUnconf 2014
JsUnconf 2014
emrox
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Sven Haiges
Weitere ähnliche Inhalte
Andere mochten auch
N N E M Stammtisch 181109 2
N N E M Stammtisch 181109 2
Making Sense
Fundraising Isa 071009
Fundraising Isa 071009
guestf18693
Raumdesign Kidsrooms Kinderzimmer
Raumdesign Kidsrooms Kinderzimmer
mefire
Patientenvortrag Ankylos
Patientenvortrag Ankylos
Steuer
Hello World // MM 08-11
Hello World // MM 08-11
Noël Bossart
Neue Rhythmisierung am MSM
Neue Rhythmisierung am MSM
guest8e703e1
WissJour20
WissJour20
Prof. Alexander Gerber
Entwicklung deutscher Wissenschafts-Medien
Entwicklung deutscher Wissenschafts-Medien
Prof. Alexander Gerber
BdS - Garantieverzinsung: Der Große Bluff
BdS - Garantieverzinsung: Der Große Bluff
Hans Müller
Monthly report on de international sales september 2015
Monthly report on de international sales september 2015
WebInterpret SAS
PräSentation1
PräSentation1
Steuer
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
Noël Bossart
Umzug
Umzug
xandy80
Trendstudie Wissenschaftskommunikation (Ergebnisse des Experten-Delphis)
Trendstudie Wissenschaftskommunikation (Ergebnisse des Experten-Delphis)
Prof. Alexander Gerber
Irregular verbs
Irregular verbs
Nalan English
optivo - Torben Otto und René Kulka
optivo - Torben Otto und René Kulka
optivo GmbH
Formulare
Formulare
Noël Bossart
Xinnovations-2010
Xinnovations-2010
Prof. Alexander Gerber
Seminar: Tipps und Tricks für erfolgreiches Lifecycle-Marketing
Seminar: Tipps und Tricks für erfolgreiches Lifecycle-Marketing
optivo GmbH
Europäischer Verkaufsbeschleuniger - die Features
Europäischer Verkaufsbeschleuniger - die Features
WebInterpret SAS
Andere mochten auch
(20)
N N E M Stammtisch 181109 2
N N E M Stammtisch 181109 2
Fundraising Isa 071009
Fundraising Isa 071009
Raumdesign Kidsrooms Kinderzimmer
Raumdesign Kidsrooms Kinderzimmer
Patientenvortrag Ankylos
Patientenvortrag Ankylos
Hello World // MM 08-11
Hello World // MM 08-11
Neue Rhythmisierung am MSM
Neue Rhythmisierung am MSM
WissJour20
WissJour20
Entwicklung deutscher Wissenschafts-Medien
Entwicklung deutscher Wissenschafts-Medien
BdS - Garantieverzinsung: Der Große Bluff
BdS - Garantieverzinsung: Der Große Bluff
Monthly report on de international sales september 2015
Monthly report on de international sales september 2015
PräSentation1
PräSentation1
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
Umzug
Umzug
Trendstudie Wissenschaftskommunikation (Ergebnisse des Experten-Delphis)
Trendstudie Wissenschaftskommunikation (Ergebnisse des Experten-Delphis)
Irregular verbs
Irregular verbs
optivo - Torben Otto und René Kulka
optivo - Torben Otto und René Kulka
Formulare
Formulare
Xinnovations-2010
Xinnovations-2010
Seminar: Tipps und Tricks für erfolgreiches Lifecycle-Marketing
Seminar: Tipps und Tricks für erfolgreiches Lifecycle-Marketing
Europäischer Verkaufsbeschleuniger - die Features
Europäischer Verkaufsbeschleuniger - die Features
Ähnlich wie JavaScript & jQuery
JsUnconf 2014
JsUnconf 2014
emrox
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Sven Haiges
Dojo Und Notes
Dojo Und Notes
dominion
Wbfntdy 2012
Wbfntdy 2012
Markus Greve
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
Karionis
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
Sebastian Springer
Fly2pdf
Fly2pdf
guestbcad49
App Entwicklung mit Appcelerator Titanium - MTC 2014
App Entwicklung mit Appcelerator Titanium - MTC 2014
Marcel Pociot
jQuery & CouchDB - Die zukünftige Webentwicklung?
jQuery & CouchDB - Die zukünftige Webentwicklung?
openForce Information Technology GesmbH
Angular von 0 auf 100
Angular von 0 auf 100
Yvette Teiken
Back to Basics German 2: Erstellen Sie Ihre erste Anwendung in MongoDB
Back to Basics German 2: Erstellen Sie Ihre erste Anwendung in MongoDB
MongoDB
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010
Dirk Ginader
Fly2pdf
Fly2pdf
guestdbdadae
Shortcodes erstellen mit WordPress
Shortcodes erstellen mit WordPress
Torsten Landsiedel
Malte Wessel - Google web toolkit
Malte Wessel - Google web toolkit
drbreak
Icons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experience
Markus Greve
Back to Basics – Webinar 2: Ihre erste MongoDB-Anwendung
Back to Basics – Webinar 2: Ihre erste MongoDB-Anwendung
MongoDB
2012-05-14 NoSQL in .NET - mit Redis und MongoDB
2012-05-14 NoSQL in .NET - mit Redis und MongoDB
Johannes Hoppe
2012-05-10 - UG Karlsruhe: NoSQL in .NET - mit Redis und MongoDB
2012-05-10 - UG Karlsruhe: NoSQL in .NET - mit Redis und MongoDB
Johannes Hoppe
Node.js
Node.js
Sebastian Springer
Ähnlich wie JavaScript & jQuery
(20)
JsUnconf 2014
JsUnconf 2014
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Dojo Und Notes
Dojo Und Notes
Wbfntdy 2012
Wbfntdy 2012
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
Fly2pdf
Fly2pdf
App Entwicklung mit Appcelerator Titanium - MTC 2014
App Entwicklung mit Appcelerator Titanium - MTC 2014
jQuery & CouchDB - Die zukünftige Webentwicklung?
jQuery & CouchDB - Die zukünftige Webentwicklung?
Angular von 0 auf 100
Angular von 0 auf 100
Back to Basics German 2: Erstellen Sie Ihre erste Anwendung in MongoDB
Back to Basics German 2: Erstellen Sie Ihre erste Anwendung in MongoDB
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010
Fly2pdf
Fly2pdf
Shortcodes erstellen mit WordPress
Shortcodes erstellen mit WordPress
Malte Wessel - Google web toolkit
Malte Wessel - Google web toolkit
Icons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experience
Back to Basics – Webinar 2: Ihre erste MongoDB-Anwendung
Back to Basics – Webinar 2: Ihre erste MongoDB-Anwendung
2012-05-14 NoSQL in .NET - mit Redis und MongoDB
2012-05-14 NoSQL in .NET - mit Redis und MongoDB
2012-05-10 - UG Karlsruhe: NoSQL in .NET - mit Redis und MongoDB
2012-05-10 - UG Karlsruhe: NoSQL in .NET - mit Redis und MongoDB
Node.js
Node.js
JavaScript & jQuery
1.
create life. JavaScript Einführung
© 2009 by noel bossart
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.
4.
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
5.
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
6.
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
7.
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
8.
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
9.
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
10.
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
11.
Variabeln Es können mehrere
Variabeln auf einmal deklariert werden: var anzahl = 5, text = ‘hello’, z = 12+3; © 2009 by noel bossart
12.
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
13.
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
14.
15.
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
16.
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
17.
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
18.
Objekte Genau das Selbe: var
book = new Object(); book["title"] = "Herr der Ringe"; book["stock"] = 764; book["soldOut"] = false; © 2009 by noel bossart
19.
Objekte Das gleiche Objekt
kann auch wie folgt geschrieben werden: var book = { title: "Herr der Ringe", stock: 764, soldOut: false }; © 2009 by noel bossart
20.
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
21.
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
22.
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
23.
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
24.
25.
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
26.
Arrays Man kann das
selbe auch so schreiben: var books = ["Herr der Ringe", 764, false ]; © 2009 by noel bossart
27.
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
28.
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
29.
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
30.
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.
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
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
34.
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
35.
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
36.
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?
37.
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
38.
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
39.
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
40.
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
41.
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
42.
Code © 2009 by
noel bossart
43.
Code function css(id, css,
wert){ } © 2009 by noel bossart
44.
Code var css =
function(id, css, wert){ } © 2009 by noel bossart
45.
Code var css =
function(id, css, wert){ } © 2009 by noel bossart
46.
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
47.
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
48.
Code var css =
function(id, css, wert){ document.getElementById(id); } © 2009 by noel bossart
49.
Code var css =
function(id, css, wert){ document.getElementById(id); } © 2009 by noel bossart
50.
Code var css =
function(id, css, wert){ var elm = document.getElementById(id); } © 2009 by noel bossart
51.
Code var css =
function(id, css, wert){ var elm = document.getElementById(id); } © 2009 by noel bossart
52.
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
53.
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
54.
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
55.
Code var css =
function(id, css, wert){ document.getElementById(id).style[css] = wert; } © 2009 by noel bossart
56.
Code var css =
function(id, css, wert){ document.getElementById(id).style[css] = wert; } © 2009 by noel bossart
57.
Code var css =
function(id, css, wert){ document.getElementById(id).style[css] = wert; } © 2009 by noel bossart
58.
Code var css =
function(id, css, wert){ var elm = document.getElementById(id); elm.style[css] = wert; } © 2009 by noel bossart
59.
Code var css =
function(id, css, wert){ var elm = document.getElementById(id); elm.style[css] = wert; } © 2009 by noel bossart
60.
Code var css =
function(id, css, wert){ var elm = document.getElementById(id); elm.style[css] = wert; } © 2009 by noel bossart
61.
Code var css =
function(id, css, wert){ var elm = document.getElementById(id); elm.style[css] = wert; } © 2009 by noel bossart
62.
Code var css =
function(id, css, wert){ var elm = document.getElementById(id); elm.style[css] = wert; } © 2009 by noel bossart
63.
Code var css =
function(id, css, wert){ var elm = document.getElementById(id); elm.style[css] = wert; } © 2009 by noel bossart
64.
Code var css =
function(id, css, wert){ var elm = document.getElementById(id); elm.style[css] = wert; } © 2009 by noel bossart
65.
Code var css =
function(id, css, wert){ document.getElementById(id).style[css] = wert; } © 2009 by noel bossart
66.
67.
write less. do
more. jQuery Einführung
68.
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
69.
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
70.
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
71.
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
72.
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
73.
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
74.
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
75.
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
76.
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
77.
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
78.
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
79.
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
80.
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
81.
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
82.
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
83.
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
84.
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
85.
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
86.
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
87.
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
88.
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
89.
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
90.
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
91.
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
92.
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
93.
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
94.
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
95.
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
96.
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
97.
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
98.
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
99.
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
100.
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
101.
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
102.
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
103.
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
104.
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
105.
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
106.
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
107.
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
108.
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
109.
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
110.
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
Hinweis der Redaktion
Partner Arbeit, Recherche &#xFC;ber Geltungsbereiche.
Partner Arbeit, Recherche &#xFC;ber Geltungsbereiche.
Partner Arbeit, Recherche &#xFC;ber Geltungsbereiche.
Partner Arbeit, Recherche &#xFC;ber Geltungsbereiche.
Partner Arbeit, Recherche &#xFC;ber Geltungsbereiche.
Partner Arbeit, Recherche &#xFC;ber Geltungsbereiche.
Partner Arbeit, Recherche &#xFC;ber Geltungsbereiche.
Partner Arbeit, Recherche &#xFC;ber Geltungsbereiche.
Partner Arbeit, Recherche &#xFC;ber Geltungsbereiche.
Partner Arbeit, Recherche &#xFC;ber Geltungsbereiche.
Partner Arbeit, Recherche &#xFC;ber Geltungsbereiche.
Partner Arbeit, Recherche &#xFC;ber Geltungsbereiche.
Partner Arbeit, Recherche &#xFC;ber Geltungsbereiche.
Partner Arbeit, Recherche &#xFC;ber Geltungsbereiche.
Partner Arbeit, Recherche &#xFC;ber Geltungsbereiche.
Partner Arbeit, Recherche &#xFC;ber Geltungsbereiche.
Partner Arbeit, Recherche &#xFC;ber Geltungsbereiche.
Partner Arbeit, Recherche &#xFC;ber Geltungsbereiche.
Partner Arbeit, Recherche &#xFC;ber Geltungsbereiche.
Partner Arbeit, Recherche &#xFC;ber Geltungsbereiche.
Partner Arbeit, Recherche &#xFC;ber Geltungsbereiche.
Partner Arbeit, Recherche &#xFC;ber Geltungsbereiche.
Partner Arbeit, Recherche &#xFC;ber Geltungsbereiche.
Partner Arbeit, Recherche &#xFC;ber Geltungsbereiche.
Partner Arbeit, Recherche &#xFC;ber Geltungsbereiche.
Partner Arbeit, Recherche &#xFC;ber Geltungsbereiche.
Jetzt herunterladen