Archiv der Kategorie: Javascript

AngularJS + NodeJS Schulung

Vorraussetzung

Installation der folgenden Komponenten:

NodeJS

Konsolenbefehle

npm init -y // erstellt die package.json und bestätigt alles mit y
npm install typescript --save-dev // Mit Typescript entwickeln - fügt in package.json eine devDependencies hinzu
npx tsc --init // Erzeugt tsconfig.json (enthält z.B. die Ecma-Script-Version)
npx tsc --watch // Schaut nach Änderungen
node src/hello.js // Interpretiert das Javascript damit wir keinen Browser brauchen mit Node kann man aufs Dateisystem zugreifen
npm installiert pakete
npx temporäres Paket

Aufgabe 1: Klassen & Methoden

Baue eine Klasse die etwas zurückgibt bei folgendem Code

let s: Student = new Student();
let label:string = s.getLabel(123457);
console.log(label); // "Student mit Matrikelnummer: 123456"

Lösung 1

class Student {
    oldNumber:number = -1;

    getLabel(matNr:number):string {
        if (matNr == 123456)
        {
            this.oldNumber = matNr;
            let zusammenGebaut = "Die Nr. " + this.oldNumber;
            return zusammenGebaut;
        }
        else
        {
            return `Student mit Matrikelnummer: ${matNr}`;
        }
    }
  }

Aufgabe 2: Konstrukturen

Sorge dafür, dass diese Ausgabe über einen Konstruktor funktioniert

let s: Student = new Student("Max", 123456);
let label: string = s.getLabel();
console.log(label); // "Student Max mit Matrikelnummer: 123456";

Lösung 2

class Student {
    name: string;
    mNr: number;

    constructor(_name: string, _mNr: number) {
      this.name = _name;
      this.mNr = _mNr;
    }

    getLabel() {
        return `Student ${this.name} mit Matrikelnummer ${this.mNr}`;
    }
  }

Aufgabe 3: Auslagern in andere Dateien

Lagere die Klasse Student in eine andere Datei aus, so dass sie mit den folgenden Kommandos wieder instanziert werden kann

import {Student} from "./student"

let s: Student = new Student("Max", 123456);
let label: string = s.getLabel();
console.log(label); // "Student Max mit Matrikelnummer: 123456";

Lösung 3

Lege die Klasse student.js im gleichen Verzeichnis wie hello.js an und kopiere die Student-Klasse von Lösung 2 rein:

export class Student {
    oldNumber:number = -1;
    name: string;
    mNr: number;

    constructor(_name: string, _mNr: number) {
      this.name = _name;
      this.mNr = _mNr;
    }

    getLabel() {
        return `Student ${this.name} mit Matrikelnummer ${this.mNr}`;
    }
  }

Aufgabe 4: ESLint für sauberen Code

Säubere den Code mit ESLint

Ansatz 4

Führe die folgenden Konsolenbefehle aus um ESLint zu verwenden:

npm init @eslint/config
npx eslint src/hello.ts

Beobachtung 4

ESLint meckert:

Lösung 4

Ändere den Code so, dass aus den Variablen aus Lösung 3 anstelle von let das Keyword const verwendet wird:

import {Student} from "./student"

const s: Student = new Student("Max", 123456);
const label: string = s.getLabel();
console.log(label); // "Student Max mit Matrikelnummer: 123456";

Javascript: Read URL GET Parameter from the browsers address bar that have been passed / commited

Problem

A javascript should read the browsers address bar to get GET Üarameters that have been appended to the adress bar.

Approach – Ansatz

Usage of decodeURIComponent

Solution

var getUrlParameter = function getUrlParameter(sParam) {
	var sPageURL = decodeURIComponent(window.location.search.substring(1)),
		sURLVariables = sPageURL.split('&'),
		sParameterName,
		i;

	for (i = 0; i < sURLVariables.length; i++) {
		sParameterName = sURLVariables[i].split('=');

		if (sParameterName[0] === sParam) {
			return sParameterName[1] === undefined ? true : sParameterName[1];
		}
	}
};

var myMap = getUrlParameter("map");
if (myMap) {
	diagramType = myMap;
}

You can call now the script like this:
http://webseite.html?map=Test

Projektvorstellung: HTML5+Javascript+Canvas: Guitartabs.de/Tabulaturen.de – Anwendung zum Zeichnen von Tabulaturen (Gitarrennoten)

Intention

Im Proberaum mit Internetzugang ergab sich oft die Situation, in der man schnell ein paar Tabulaturen aufschreiben musste.
Tabulaturen.de soll einfach die nötigsten Werkzeuge liefern um eine druckfähige Tabulatur ohne großen Aufwand zu generieren.

Zielgruppenanalyse

Ranking für Tabulaturen und Guitartabs bei Google

Es ist ein stark rückläufiger Trend für die Suche nach Tabulaturen und Guitartabs zu verzeichnen. Ich vermute dass das Ventil der Suchenden nun vorwiegend YouTube-Videos sind, da man hier auch ein breites Spektrum an Tutorials für Lieder vorfindet.

Was in den meisten Fällen fehlt, wäre das Anreichern von den YouTube Videos mit Tabulaturen. Nun ist natürlich die Frage ob die Video irgendeine Legalitätslücke ausnutzen, da sie regelrecht sprießen. Darf jeder irgendein Lehrvideo machen wenn er keine Tabulaturen zeigt?

Weitere denkbare Projekte auf der Basis

Kapital vorhanden:
– Brainstorming Tool
– Projektmanagement (GANTT)
– UML
– Programmablaufpläne
– ER Diagramme (die normalen)
– Web Visio

Ohne Kapital
– Puzzle

To Do

  • Löschen von Tabs und Texten
  • Editieren von Texten
  • Taktstriche
  • Properties wie bei Objektinspektor für Tab (Tempo / Takt … )
  • Menü wie Online Word
  • MIDI Tonausgabe
  • Noten
  • Mehrere Seiten
  • Facebook login / Registrieren
  • Daten speichern
  • Druckqualität untersuchentabsymbols_ttf

 

Persönlicher Bericht: Mein Einstieg in die HTML5 Spieleentwicklung mit phaser.io

Intention

Viele Entwickler, die selber schon leidenschaftlich ein Spiel gezockt haben, träumen von der Umsetzung eigener Spieleideen.

Bei mir ist es hier nicht anders. Ich habe viele Ideen und viele davon sind unsinnig. Man würde sie vermutlich in die Kategorie „Trash“ stecken. Aber gerade professionell anmutende Spiele mit Trash-Faktor sind es, die viele Spieler fesseln. Die meisten Spiele, die nicht als „Trash“ gekennzeichnet sind, sind unter reellen Bedingungen absoluter Humbug.

Beispiele:
* Ein Klempner aus Brooklyn der Pilze frisst und auf Schildkröten rumtrampelt
* Eine Steinschleuder die kleine Vögel auf grüne Schweine schießt
* Prügelnde Kontrahenten, die Energiebälle schießen und mit Hubschrauberkicks durch die Gegend fliegen
* .. etc

Obwohl diese Spiele absolut unrealistisch sind, haben diese eine „Spielephysik“, die aber nicht unbedingt realisitsch sein muss.
* Super Mario springt und fällt auch wieder auf den Boden
* Ein Angry Bird schubst Teile seiner Welt an, diese stürzen um und schubsen wiederum weitere Teile an, solange bis das Schweinehaus zusammenfällt.
* Die Sequenz des Schießens bei Ryu/Ken benötigt eine gewisse Zeit in der sie angreifbar sind. Wenn Chun Li in der Luft ist kann Guile sie mit seinem Flip-Kick unbeschadet runterholen.

Distanziert betrachtet haben mich diese Spiele gefesselt und viel Zeit gekostet, waren aber konzeptuell absoluter Quatsch. Ob ich als Hobbyentwickler und Familienvater in meiner Frezeit die Zeit finde, an einem Spiel zu entwickeln, möchte ich an diesem Punkt noch bezweifeln aber ich lasse mich jetzt mal überraschen.

Aus diesem Grund wollte ich während meines Urlaubes den Einstieg in die HTML 5 Spieleentwicklung so hinbekommen, dass ich grundsätzlich ein 2D-Spieleentwicklungsproblem angehen kann.

Idee

Die erste Idee ist nichts weltbewegendes und sie ist absoluter Quatsch:
Beer Througher Professional

Wir haben eine Person, die ein Bierglas über einen Tisch wirft. Während das Bierglas über den Tisch fliegt, soll die Kamera mitscrollen (wie bei Angry Birds). Am Ende soll die Kamera stehen bleiben, dass Bier auf ein Trampolin fallen (oder auch nicht – je nachdem wie stark geworfen wurde) und dem Biertrinker, der faul auf der rechten Seite liegt, in den Mund gekippt werden.

Grundlagenforschung

Nachdem ich nun Google nach dem Thema „HTML 5 Canvas Games“ befragte, landete ich in dem Forum http://www.html5gamedevs.com in dem ich mich auch prompt registrierte um meine Idee den „Profis“ vorzustellen. Ich wollte mir Anregungen und Tipps holen, die mich bei der Umsetzung dieser Spieleidee als HTML5 Spiel befähigen.

Dazu schrieb ich diesen Forenbeitrag:

Während ich auf Antwort wartete, stöberte ich etwas in dem Forum und stieß auf die eigene Forenrubrik „Phaser.io“. Hierbei handelt es sich um ein HTML 5 Canvas Spieleframework, welches momentan scheinbar eine relativ weite Verbreitung hat.

Meine erster Beantworter auf den Forenbeitrag schlägt außerdem die Nutzung einer Bibliothek namens „PIXI.JS“ für das 2D Rendering vor, die angeblich auch in phaser.io vorhanden ist, ebenfalls wie diverse Spielephysik, auf die man direkt über die Phaser-Framework-Methoden zugreifen kann. Desweiteren gibt es Add-Ons, die man zwar für kleines Geld dazukaufen muss, aber welche die Funktionalitäten von Box2D hinzufügen:

http://phaser.io/shop

Hier ist eine Box2D Wasserpartikeldemo:

http://google.github.io/liquidfun/

Um kleine Javascripte auszuprobieren wurde auf der Seite von phaser.io folgendes Minitool empfohlen:

http://jsfiddle.net/

Entschluss

Ich werde mich daher in Phaser.io einarbeiten, da es als Werkzeugkasten die meisten Features für die Entwicklung von Spielen bietet.

Phaser kann man im Web unter der folgenden URL finden:

http://phaser.io/

Einstieg in Phaser.io / Erfahrungsbericht:

Die Entwicklungsumgebung

Zunächst stellt sich die Frage, welche Entwicklungsumgebung man nutzen möchte.

Da ich von Online-Quellcodeeditoren wie Codeanywhere begeistert bin, wollte ich die auf der Website phaser.io vorgeschlagene Cloud9-Variante testen. Hierbei handelt es sich ebenfalls um einen Online-Quellcodeeditor

http://c9.io <- Cloud9 Quellcodeditor

Erste Hürde: „First, sign up to the website using GitHub, and once this is completed, you will be redirected to your dashboard.“

Hierzu musste ich mich erstmal bei GitHub (ja hatte noch keinen Account 😉 ) anmelden und das Hello World Tutorial durchgehen, was mich 20 Minuten gekostet hat. Im Tutorial musste man einen „Branch“ anlegen und diesen mit dem „Master“ wieder vereinigen.

Der benannte Vorteil von GitHub: “ You don’t have to worry about losing data on your hard drive or managing a project across multiple computers“

Es lebe die Cloud!

In GitHub musste ich zunächst den Cloud9 Editor authorisieren auf mein Repository zugreifen zu dürfen:
„Authorize application
Cloud9 by @cloud9Deploy would like permission to access your account“

Auf dem Cloud9 Dashboard angelangt, erzeugt man ein neues Projekt von der URL
http://github.com/photonstorm/phaser.git

Diese URL scheint das komplette Phaser-Framework zu beinhalten.

Meine erste Überraschung beim Cloud9 Editor:
* Man kann PHP Code anlegen, der interpretiert wird
* Es gibt eine Ubuntu Command Line Zeile, in der man BASH-Kommandos ausführen kann

Der Cloud9 Editor bietet einen Debugger, den hatte ich für PHP schon länger gesucht, allerdings bleibt die Ausführung nicht bei den Breakpoints hängen. Evtl. muss man etwas konfigurieren?

Zurück zu phaser.io . Ich will ja erstmal mein Hello World Projekt erstellen :). Also mal gucken ob mir das die eingerichtete kostenlose Umgebung auch erlaubt…

Ich habe nun den gesammten root-Folder des Phaser-Ordners in den Ordner „Phaser“ kopiert, da man in der kostenlosen Version von Cloud9 nur einen Workspace nutzen darf.

Da ich mit Chrome arbeite, hat sich zum Switchen zwischen den Tabs (Editor <-> Tutorial <-> WordPress) die Tastenkombination STRG+BILD Hoch / STRG+Bild Runter als praktisch erwiesen. Auffällig ist, das der Cursorfokus des aktuellen Tabs nicht verloren geht.

Im Ordner phaser/Ressources/tutorials befinden sich alle Tutorials, die auf der Seite phaser.io aufgeführt sind. Ich hatte den Fehler gemacht über die Cloud9-Bashconsole die ZIP-Dateien mit wget runterzuladen und mit unzip zu entpacken. Dies ist unnötig.

Über den RUN-Button des Cloud9-Editors ist schnell eine geöffnete HTML-Datei geladen und mit dem Preview-Button auf den Bildschirm gebracht.

Schnell habe ich die ersten beiden Tutorials durch…

http://phaser.io/tutorials/making-your-first-phaser-game/part2

Es ist nicht nötig den Run-Button bei jedem Versuch neu zu klicken sondern es reicht aus den Refresh button zu klicken.

Fazit

* Die kostenlose Variante von Cloud9 (http://c9.io) ist sehr zu empfehlen.

* Ich hätte das GitHub Tutorial nicht benötigt, da lediglich GitHub für den Login von Cloud9 genutzt wird.

* Ich kann nun relativ schnell rechner- und ortsunabhängig an einem Canvas-Spiel entwickeln

Erste Schritte mit dem Framework

Meines Erachtens macht es durchaus Sinn auf der Hauptebene seines Cloud9 Workspace das Phaser-Framework mit den Tutorials als Nachschlagewerk zu nutzen. Die Hauptstruktur eines Phaser-Projektes sieht so aus:

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

function preload() {

    game.load.image('sky', 'assets/sky.png');
    game.load.image('ground', 'assets/platform.png');
    game.load.image('star', 'assets/star.png');
    game.load.spritesheet('dude', 'assets/dude.png', 32, 48);

}

var platforms, player, cursors, stars;
var score = 0;
var scoreText;

function create() {

    //  We're going to be using physics, so enable the Arcade Physics system
    game.physics.startSystem(Phaser.Physics.ARCADE);

    //  A simple background for our game
    game.add.sprite(0, 0, 'sky');

    //  The platforms group contains the ground and the 2 ledges we can jump on
    platforms = game.add.group();

    //  We will enable physics for any object that is created in this group
    platforms.enableBody = true;

    // Here we create the ground.
    var ground = platforms.create(0, game.world.height - 64, 'ground');

    //  Scale it to fit the width of the game (the original sprite is 400x32 in size)
    ground.scale.setTo(2, 2);

    //  This stops it from falling away when you jump on it
    ground.body.immovable = true;

    //  Now let's create two ledges
    var ledge = platforms.create(400, 400, 'ground');

    ledge.body.immovable = true;

    ledge = platforms.create(-150, 250, 'ground');

    ledge.body.immovable = true;

    // The player and its settings
    player = game.add.sprite(32, game.world.height - 150, 'dude');

    //  We need to enable physics on the player
    game.physics.arcade.enable(player);

    //  Player physics properties. Give the little guy a slight bounce.
    player.body.bounce.y = 0.2;
    player.body.gravity.y = 300;
    player.body.collideWorldBounds = true;

    //  Our two animations, walking left and right.
    player.animations.add('left', [0, 1, 2, 3], 10, true);
    player.animations.add('right', [5, 6, 7, 8], 10, true);
    
    cursors = game.input.keyboard.createCursorKeys();
    
    stars = game.add.group();

    stars.enableBody = true;

    //  Here we'll create 12 of them evenly spaced apart
    for (var i = 0; i &lt; 12; i++)
    {
        //  Create a star inside of the 'stars' group
        var star = stars.create(i * 70, 0, 'star');

        //  Let gravity do its thing
        star.body.gravity.y = 6;

        //  This just gives each star a slightly random bounce value
        star.body.bounce.y = 0.7 + Math.random() * 0.2;
    }    
    
    scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });

}

function update() {
        //  Collide the player and the stars with the platforms
    game.physics.arcade.collide(player, platforms);
    
    //  Reset the players velocity (movement)
    player.body.velocity.x = 0;

    if (cursors.left.isDown)
    {
        //  Move to the left
        player.body.velocity.x = -150;

        player.animations.play('left');
    }
    else if (cursors.right.isDown)
    {
        //  Move to the right
        player.body.velocity.x = 150;

        player.animations.play('right');
    }
    else
    {
        //  Stand still
        player.animations.stop();

        player.frame = 4;
    }

    //  Allow the player to jump if they are touching the ground.
    if (cursors.up.isDown &amp;&amp; player.body.touching.down)
    {
        player.body.velocity.y = -350;
    }    
    
    // Prüfe ob die Sterne auf die Plattform treffen
    game.physics.arcade.collide(stars, platforms);
    
    // Prüfe ob der Spieler mit einem Stern kollidiert, falls ja gehe in die 
    // Funktion collectStar
    game.physics.arcade.overlap(player, stars, collectStar, null, this);
}

function collectStar (player, star) {

    // Removes the star from the screen
    star.kill();

    //  Add and update the score
    score += 10;
    scoreText.text = 'Score: ' + score;


}

Fazit

* In der Preload-Methode werden die Grafiken (PNGs) geladen. Spritesheets sind dabei Animationen, die als PNG vorliegen und die einzelnen Frames nebeneinander beinhalten.
* Die Objekte werden mit game.add.sprite in der entsprechenden Reihenfolge in der Create-Methode hinzugefügt
* Phaser besitzt 3 Physikengines. wobei Arcade die einfachste sein soll
** Arcade Physics
** Ninja Physics
** P2.JS Full-Body Physics
* Kollisionen werden immer in der Update-Prozedur abgefragt
* Tastatureingaben werden in der Update-Prozedur abgefragt
* Velocity ist die Geschwindigkeit, die ein Objekt bekommt

Anwendbarkeit

Wir haben hier eine fixe Welt, ich möchte aber sowas wie ein scorllendes Spiel nach dem Angry Birds Vorbild haben. Dafür brauche ich ein Beispiel. Die Frage ist, ob man Tilemaps, welche vorwiegend für scrollende Jump-and-runs wie Super Mario oder Giana Sisters verwendet werden benutzen sollte.

Ich suche also ein Beispiel das ich idealerweise nutzen kann…

Durchgehen der Phaser.io Examples

N

Debugging

Der Cloud9 Editor bietet die Möglichkeit, Break Points zu setzen. Ob diese Breakpoints nun das PHP oder Javascript debuggen können habe ich nicht rausgefunden, da sie keine Auswirkung haben. Allerdings hat mein Google Chrome Debugger auch recht nützliche Funktionen für das Debuggen. Nachteil ist, das man die Cloud9 Umgebung kurz verlassen muss. Man kann allerdings die URL (siehe Screenshot) des gestarteteten Webservers einfach in einen neuen Tab pasten.

Hierbei wunder ich mich wie lange dieser Webserver von c9.io laufen wird, da er ja für einen kostenlosen Account massig Systemressourcen frisst.

 

Canvas_debugging_with_chrome

Javascript: CSV Datei zeilenweise einleise / read csv file line by line

Problem

Eine CSV Datei soll zeilenweise per Javascript eingelesen werden
A CSV file should be read line by line via javascript

Ansatz – Approach

Es wird die $.ajax-Funktion von JQuery verwendet. JQuery wird entsprechend http://jquery.com/download/ eingebunden.
We are using the $.ajax-Method of JQuery. JQuery will be embedded according to http://jquery.com/download/.

Lösung – Solution

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "data.txt",
        dataType: "text",
        success: function(data) {processData(data);}
     });
});

function processData(allText) {
    var allTextLines = allText.split(/\r\n|\n/);
    var headers = allTextLines[0].split(',');
    var lines = [];

    for (var i=1; i&lt;allTextLines.length; i++) {
        var data = allTextLines[i].split(',');
        if (data.length == headers.length) {

            var tarr = [];
            for (var j=0; j&lt;headers.length; j++) {
                tarr.push(headers[j]+":"+data[j]);
            }
            lines.push(tarr);
        }
    }
    // alert(lines);
}

HTML/CSS: Ein kompaktes JQuery-Tutorial

Intention

Persönliche Intention

Meine Intention ist es ein kompaktes JQuery-Tutorial zu veröffentlichen, welches (nach diesem Abschnitt) ein Überblick über die wichtigsten JQuery-Funktionen gibt.

Warum JQuery?

JQuery ist eine Javascript-Klassenbibliothek, welche zahlreiche Funktionen für die Selektion im HTML-Baum (DOM) und dessen Manipulation (HTML-Manipulation wie z.B. das Austauschen von TABLE-Tags oder dem dynamischen Hinzufügen von TR-Tags…) enthält.

Es bietet Funktionen für…

  • Elementselektion im Document Object Model über die Sizzle Selector Engine, die weitgehend den XPATH/CSS-3-Selektoren entspricht
  • Document Object Model-Manipulation (HTML-Dokumente dynamisch ändern)
  • Erweitertes Event-System
  • Hilfsfunktionen
  • Effekte und Animationen (einblenden, ausblenden, aufklappen, zuklappen…)
  • Ajax-Funktionalitäten (POST/GET, JSON…)
  • Zahlreiche frei verfügbare Plug-ins

Wer nutzt JQuery?

Vorwiegend Web-Entwickler, die auf einer etwas niedrigeren Ebene ein Javascript-Framework benötigen. JQuery ist kein High-Level-Framework mit WYSIWYG-Editor.

Moderne AJAX/DHTML-Webanwendungen nutzen immer häufiger High-Level-Frameworks wie GWT, ASP.NET, JSF usw…
Diese Frameworks bieten UI-Komponenten (z.B. Kalender, Tabellen mit DB-Anbindung, Bäume…) an, die herkömmlichen HTML-Seiten durch simples „Draufziehen“ (in einem WYSIWYG-Editor) oder Instanzierung neuer Teile (z.B. in einem UI-Composite-Pattern) die Fähigkeit verleiht sich durch Nutzerinteraktion (z.B. Mausklicks, Tastatureingaben…) zu verändern, ohne die Seite komplett neu zu laden (AJAX/DHTML).
Hierbei findet im Hintergrund eine DOM-Manipulation statt (häufig per AJAX – hier werden z.B. asynchron Abschnitte aus der Datenbank nachgeladen). Der Browser zuckt dabei nicht/Die Seite verschwindet bei einem Klick nicht kurz. Wenn man solche Komponenten selber entwickelt, ist JQuery eine ausgezeichnete Erweiterung zu herkömmlichen Javascript-Funktionen.
Microsoft hat in seiner IDE Visual Studio JQuery integriert und verwendet es bei der Entwicklung von Drag-And-Drop-UI-Komponenten. Aus diesem Grund ist ein Zugriff in Visual Studio auf die Funktionen möglich.

Tutorial

Zu Beginn…

Man benötigt 2 Dinge um mit JQuery zu beginnen

  • Das Einbinden der Bibliothek (herunterladen oder wie hier googlecontent nutzen)
  • Die READY-Funktion welche ein Ereignis ist, das sofort auftritt wenn das HTML-Dokument (oder das DOM) zur Manipulation bereit ist

…JQuery ermöglichen…

Hierfür fügen wir zwischen die HEAD-Tags des HTML-Dokuments die folgenden Skripte hinzu:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">// <![CDATA[
   
// ]]></script><script type="text/javascript">// <![CDATA[
                                         
	// Hier kommt die READY-Methode (s.u.) hin    
    
// ]]></script>Hello World

… und die Ready-Methode implementieren

Hierfür gibt es 3 Möglichkeiten

1. Vollständig:

jQuery(document).ready(function() {
   // Code hier einfügen
})

2. Mit $ als Alias für die jQuery-Klasse

$(document).ready(function() {
   // Code hier einfügen
})

3. Kurzform:

$(function() {
   // Code hier einfügen
})

Die READY-Methode ist das erste Event, was auftreten kann. Das Ereignis tritt ein, wenn auf das DOM zugegriffen werden kann. Ein ALERT-Fenster in dieser Methode aufzurufen macht nicht viel Sinn, da es nicht notwendig ist auf das geladene DOM zugreifen zu müssen. Dies könnte auch früher passieren.

Einschub: Was ist DOM?

Beim DOM handelt es sich um ein Modell, welches den Zugriff auf Elemente, Teilbäume oder Teil-XML-Strukturen erlaubt. Grundsätzlich sieht das DOM eine HTML-Dokumentes mit einer Tabelle folgendermaßen aus:

Verwendung des Selektions-Teils für den DOM

Bei den Beispielen werde ich nur noch die Kurzform der READY-Methode nutzen.

$(function() {
   // Wähle alle <a>-Tags aus und definiere ein CLICK-Ereignis
   $("a").click(function(event){
       // wird bei jedem klick auf einen Link aufgerufen
       alert('Hello JQuery!');

       // verhindert das Aufrufen des in Link-Zieles
       event.preventDefault();
   });
});
</a>

Wer den obigen Code bereits versteht, hat auch das Selektions-Konzept von JQuery verstanden.

Der erste Aufruf ist immer eine Selektion auf das DOM/HTML-Dokument. Mit $(„a“) (alternativ auch jQuery(„a“) ) wurden alle -Tags im gesamten HTML-Dokument ausgewählt. Das Anhängen von .click hängt dann an die Selektion (also alle Links, bzw. -Tags) ein onClick-Ereignis, welches ein ALERT-Fenster öffnet. Die Methode preventDefault() des Event-Objektes verhindert das Standardverhalten des Links, nämlich den Aufruf der Seite. Somit könnte man für alle Links die Zielseite ändern oder abfangen. Der Funktionskörper function() deklariert eine anonyme, namenlose Methode die ausgeführt wird, wenn das onClick-Ereignis des Links (also des -Tags) aufgerufen wird.

Man kann grundsätzlich alle – oder XML-Tags eines „Baumes“ (nämlich dem DOM) selektieren.

Doch was gibt es für Möglichkeiten der Selektion?

Oberflächlich gesehen gibt es 2 Möglichkeiten…

  1. Kombination aus CSS und XPATH -> $(„div > ul a“)
  2. Nutzung verschiedener Methoden des JQuery-Objektes (z.B. $(„a“).each mit $(this) Referenz

Selektion …

… auf eine TAG-ID
$(„#eineDivID“).addClass(„red“);

Die Raute # sagt der Selektion, das sie ein Attribut id=“..“ suchen soll. Die Selektion beinhaltet dann das Element (z.B. ein DIV). Hier wird diesem DIV die CSS-Klasse .red zugewiesen.

Beispiel:

Div-Inhalt
… auf alle Kind-Elemente   aller Tabellen eines Dokumentes
$(„table > tr > td“).addClass(„blue“);Die Selektion wählt alle td-Tags aller Tabellen aus und fügt diesen die CSS-Klasse .blue hinzu. Für Kind-Elemente (Unter-Tags) wird das Ist-Größer-Als-Zeichen > verwendet.

… auf das letzte
-Element aller Tabelle eines Dokumentes
$(„table > tr > td:last“).hover(function(){$(this).addClass(„green“);},function(){$(this).removeClass(„green“);})

Unter Verwendung vom HOVER-Event, welches 2 Parameter onMouseOver/onMouseOut als „functions“ übergeben bekommt, wird ein Mouse-Over-Event auf alle letzten Zeilen aller Tabellen gelegt. Fährt man mit der Maus drüber nimmt dieses die Farben/Styles an, die in der CSS-Klasse .green definiert wurden. Ist die Maus wieder außerhalb der Zeile wird die Klasse entfernt.

… auf alle 

-Tags, die ein Class-Attribut haben

$(„p[@class]“).hide()

Selektiert alle p-Tags im Dokument, die ein Attribut für eine CSS-Klasse vorgegeben haben class=“…“ und versteckt diese.

… auf den ersten 

-Tag einer Seite

$(„p:eq(0)“)…..
… auf alle sichtbaren DIVs der Seite
$(„div:visible“)…
… auf alle -Tags die unter einem -Tag sind
$(„ul > li“)…. alternativ auch $(„ul/li“)
… auf alle 

-Tags mit einer CSS-Klasse „foo“, die einen Link haben

$(„p.foo[a]“)…
… auf alle -Tags mit einem Link mit dem Text „Register“
$(„li[a:contains(‚Register‘)]“)…
… auf alle -Tags mit dem Name „bar“
$(„input[@name=bar]“)…..
… auf alle angehakten/gecheckten Radio-Buttons
$(„input[@type=radio][@checked]“)….

CSS Selektoren

Selektionen nach Stylesheet folgen der Syntax

E:STYLE

wobei E ein HTML-Element/HTML-Tag bezeichnet.

… auf ein 

-Element als einziges Kind-Element seines Eltern-Tags

$(„p:only-child“) …
… auf ein 

-Tag als letztes Kind-Element seines Eltern-Elements

$(„p:last-child“) …

Mit regulären Vergleichsoperatoren…

… z.B. bei der Suche nach Attributen

… auf alle -Tags, in deren href-Attribut der String /content/gallery vorkommt
$(„a[href*=’/content/gallery‘]“)…
… auf alle 

-Tags dessen Attribut „foo“ mit „bar“ beginnt

$(„p[@foo^=bar]“)
… auf alle 

-Tags dessen Attribut „foo“ mit „bar“ endet

$(„p[@foo$=bar]“)

… will be continued (Fortsetzung folgt…)