JavaScript & jQuery

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


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


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>


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>


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>

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>

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 */
}


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’);


Variabeln
Es können mehrere Variabeln auf einmal deklariert
werden:
var anzahl = 5, text = ‘hello’, z = 12+3;


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”)


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));


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

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 = {};


Objekte
Objekte können beliebige Werte enthalten:
var book = new Object();
book.title = "Herr der Ringe";
book.stock = 764;
book.soldOut = false;


Objekte
Genau das Selbe:
var book = new Object();
book["title"] = "Herr der Ringe";
book["stock"] = 764;
book["soldOut"] = false;


Objekte
Das gleiche Objekt kann auch wie folgt geschrieben
werden:
var book = {
title: "Herr der Ringe",
stock: 764,
soldOut: false
};


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
};

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


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
auﬂistet. Schreibe diese in einen DIV.


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;


Arrays
Man kann das selbe auch so schreiben:
var books = ["Herr der Ringe", 764, false ];


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.


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 ] );
}


Aufgabe
Erstelle ein Objekt garage welches mehrere fahrzeuge
in einem Array zusammenfasst.
Erstelle eine Funktion count() welche die Anzahl aller sich
in der Garage beﬁndlichen Fahrzeuge berechnet. Die
Funktion wird über einen Link aufgerufen.


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”);


Funktionen
Funktion:

Was ist das?

Funktionen
Funktion:

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;
};


Funktionen
Eine Funktion ist in JavaScript als Objekt umgesetzt.
Daher kann eine Funktion wie ein Objekt erstellt werden:
var Funktionsname = function( Argumente ) {
Anweisungen
};


Code


Code

function css(id, css, wert){

}


Code

var css = function(id, css, wert){

}


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>


Code

document.getElementById(id);
}


Code

var elm = document.getElementById(id);
}


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”

Code

document.getElementById(id).style[css] = wert;
}


Code

var elm = document.getElementById(id);
elm.style[css] = wert;
}


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.

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.


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.


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’);



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’);



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



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’);


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);


Inner Funktion wird deklariert (als Objekt)
}
inner();
}


}
inner(); Äussere Funktion wird deklariert
}


}
inner(); Äussere Funktion wird deklariert
}
Äussere Funktion wird aufgerufen und die innere Übergeben

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

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’);


Attribute bearbeiten
Mit jQuery kann man leicht Eigenschaften (Attribute) eines
Elements bearbeiten.

$links.attr(‘title’, ‘externer Link’);


Attribute bearbeiten
Da jQuery als verkettete Bibliothek angelegt ist, können
mehrere Befehle aneinander gereiht werden:

$links.attr(‘title’, ‘externer Link’).attr(‘target’, ‘_blank’);

Mehr dazu unter docs.jquery.com/Attributes


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 */


CSS
Mit jQuery ist es leicht, CSS zu modiﬁzieren. Mit der css
Funktion kann man ganze Objekte mit CSS Code
übergeben.
var $hover = $(‘ul li a:hover’);
$hover.css({
‘color’: ‘blue’,
‘background’: ‘red’
});


CSS
Mit jQuery ist es leicht, CSS zu modiﬁzieren. Mit der css
Funktion kann man ganze Objekte mit CSS Code
übergeben.
$hover.css({
‘color’: ‘blue’,
Objekt
‘background’: ‘red’
});


CSS
Die Funktionen addClass und removeClass können
CSS-Klassen setzen und entfernen:
$hover.addClass(‘over’);

Mehr dazu unter docs.jquery.com/CSS


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


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


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


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


HTML manipulieren

Mit append( ); und prepend( ); kann man Elemente und
Texte innerhalb des selektierten Elements am Anfang
(pre...) oder am Ende (app...) anfügen:
$div.prepend(‘<img src=”stern.gif” />’)

Div mit der ID main


HTML manipulieren

Mit before( ); und after( ); ist es möglich, vor oder nach
dem selektierten Element weitere Elemente einzufügen:
$div.before(‘<div id=”content”>Content</div>’);

Div mit der ID main


HTML manipulieren

$div.before(‘<div id=”content”>Content</div>’);

Content

Div mit der ID main


HTML manipulieren

$div.after(‘<div id=”content”>Content</div>’);

Div mit der ID main

Mehr dazu unter docs.jquery.com/Manipulation

HTML manipulieren

$div.after(‘<div id=”content”>Content</div>’);

Div mit der ID main

Content

Mehr dazu unter docs.jquery.com/Manipulation

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’ );
}
);

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’ );
}
);

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 );
}
);


JavaScript & jQuery

Weitere ähnliche Inhalte

Andere mochten auch

Ähnlich wie JavaScript & jQuery

JavaScript & jQuery

Hinweis der Redaktion