JavaScript hinzufügen

From Joomla! Documentation

This page is a translated version of the page Adding JavaScript and the translation is 94% complete.

Other languages:
български • ‎বাংলা • ‎Deutsch • ‎English • ‎español • ‎eesti • ‎فارسی • ‎français • ‎हिन्दी • ‎Nederlands • ‎português do Brasil • ‎中文(台灣)‎
Joomla! 
2.5 & 3.x
Serie

JavaScript (auch bekannt als ECMAScript) ist eine Skriptsprache, die hauptsächlich bei der Entwicklung von client-seitigen Websites verwendet wird, um die Benutzerfreundlichkeit zu erweitern und zu verbessern. Joomla bietet Entwicklern einfach zu verwendete Mechanismen, um JavaScript in ihre Erweiterungen unter Verwendung bestehender API-Methoden einzubinden. Es gibt eine Reihe von Methoden, um JavaScript in Ihre Joomla-Erweiterungen aufzunehmen; Einige davon werden im Folgenden beschrieben.

Verwendung

Es gibt drei Methoden, um JavaScript über die Joomla-API in Ihren Code einzubetten: JDocument::addScriptDeclaration,JDocument::addScript und script. Diese Methoden sollten entweder in der View-Klasse Ihrer Komponente <yourcomponent>/views/<yourview>/view.html.php oder im Template-Skript <yourcomponent>/views/<yourview>/tmpl/<yourtemplate>.php oder im Falle eines Moduls in dessen Template-Skript <yourmodule>/tmpl/<yourtemplate>.php aufgerufen werden.

Inline JavaScript

JavaScript-Code Blöcke können direkt innerhalb der Anzeigevorlage einer Komponente oder eines Moduls mit der Methode JDocument class'addScriptDeclaration deklariert werden:

<?php
$document = JFactory::getDocument();
$document->addScriptDeclaration('
    window.event("domready", function() {
        alert("An inline JavaScript Declaration");
    });
');
?>

External JavaScript

Alternativ können Sie Ihr JavaScript auch in eine separate Datei auslagern. Die Auslagerung Ihres JavaScripts in eine externe Datei, kann die Lesbarkeit Ihres Templatecodes verbessern, insbesondere wenn das JavaScript sehr umfangreich oder komplex ist.

Es gibt zwei Möglichkeiten, eine JavaScript-Datei über die Joomla! API einzubinden. Die erste beinhaltet die Verwendung der Methode der class'JDocument'addScript:

<?php
$document = JFactory::getDocument();
$document->addScript('/media/system/js/sample.js');
?>

Die zweite verwendet die Methode der class'JHTMLscript:

<?php
// Add the path parameter if the path is different than 'media/system/js/'
JHTML::script('sample.js', 'templates/custom/js/');
?>

Die API hat sich in 3.x geändert, so dass der zweite Parameter kein String sein darf. Wenn Sie diese Methode wirklich benötigen, müssen Sie den absoluten Link zu Ihrer JavaScript-Datei angeben:

<?php
JHtml::script(Juri::base() . 'templates/custom/js/sample.js');
?>

You can use options in a third parameter. This example shows the options version and relative . The file example should be saved in the folder media/com_example/js/example.min.js. So you do NOT need to insert the js in the path you insert as second parameter.

<?php
JHtml::_('script', 'com_example/example.min.js', array('version' => 'auto', 'relative' => true));
?>

Beschreibung==

Die Joomla-API Metode JDocument::addScriptDeclaration,JDocument::addScript undscript betten JavaScript über das jdoc head-Tag in Joomlas index.php ein:

<jdoc:include type="head"/>

Die Verwendung der Methoden JDocument::addScript oderscript zum Einbetten von JavaScript-Includes führt dazu, dass die index.php das folgende HTML wiedergibt:

<head>
...
<script type="text/javaScript" src="/media/system/js/sample.js"></script>
...
</head>

Der Aufruf der Klassenmethode JDocument::addScriptDeclaration ergibt folgendes HTML:

<head>
...
<script type="text/javaScript">
window.addEvent("domready", function() {
    alert("Embedded block of JS here");
});
</script>
...
</head>

Die Verwendung dieser Methoden wird dringend empfohlen, da sie eine andere Skriptsprache (JavaScript) vom Haupt-PHP-Code unterscheidet und sicherstellt, dass alle JavaScript-Tags korrekt zwischen den <head></head>-Tags eingebettet sind. Und im Falle von JDocument::addScript und JHTML::script wird sichergestellt, dass eine JavaScript-Datei nur einmal enthalten ist (d.h. es gibt keine.js-Dateiduplikation).

Verwendung eines JavaScript-Frameworks

Ein Javascript-Framework stellt Entwicklern generische Funktionen zur Verfügung, um verschiedene Codierungsaufgaben konsistent und plattformunabhängig zu handhaben. Ein Framework ermöglicht es dem Entwickler, die Feinheiten der Implementierung einer bestimmten Funktion in verschiedenen Webbrowsern zu vernachlässigen und sich auf die Anforderungen der Software zu konzentrieren.

Zwei Javascript Frameworks werden als Teil von Joomla 3.x; jQuery und Mootools zur Verfügung gestellt. jQuery ist ein neu eingeführtes Framework, das sich in Joomlas neues Bootstrap HTML-Framework integriert; Mootools ist Joomlas veraltete Javascript-Bibliothek, die nun durch jQuery ersetzt wird und für die Rückwärtskompatibilität mit Erweiterungen von Drittanbietern enthalten ist.

In den meisten Fällen sollten Sie bei der Entwicklung von Javascript in Ihren Erweiterungen oder Templates ein Framework verwenden, das mit der Joomla-API einfach zu integrieren ist.

Joomla 3.x jQuery ==

Bitte beachten Sie das Handbuch auf Javascript Frameworks in Joomla 3.x für Informationen über die Einbindung eines Frameworks in Joomla 3.x.

Joomla 1.5/2.5 Mootools

Wenn Sie keinen Javascript-Code pflegen, der Mootools nutzt, oder wenn Sie eine Erweiterung für Joomla 2.5 oder früher entwickeln, wird empfohlen, stattdessen jQuery zu verwenden.

Zuerst müssen Sie den Mootools-Code in Ihre Erweiterung aufnehmen. Um das Mootools-Framework in Ihre Erweiterung aufzunehmen, fügen Sie den folgenden Code zu Ihrer Datei view.html.php oder tmpl hinzu:

FÜR JOOMLA 1.5

JHTML::_('behavior.mootools');

Für JOOMLA 2.5

JHtml::_('behavior.framework');

Der obige Code führt zu dem gleichen Ergebnis wie die ähnliche jQuery-Framework-Anweisung, d.h. er stellt sicher, dass Mootools korrekt und nur einmal eingebunden wird.

Dann ist die Verwendung von Mootools fast identisch mit jQuery:

JFactory::getDocument()->addScriptDeclaration('
window.addEvent("domready", function() {
    alert($("list").getElements("li").length);
});
');

Weitere Informationen über Mootools finden Sie unter http://mootools.net/ Die API-Dokumentation finden Sie unter http://mootools.net/docs/core

== Wichtige Hinweise für Drittanbieter ==

Wenn Sie ein benutzerdefiniertes Template oder eine Erweiterung erstellen und eine benutzerdefinierte JS-Datei hinzufügen müssen, stellen Sie sicher, dass Sie wichtige Abhängigkeiten wie Jquery oder Mootools vor Ihren eigenen JS-Dateien hinzufügen. JS-Framework-Dateien müssen immer vor allen anderen Dateien geladen werden, um sicherzustellen, dass sie zuerst ausgeführt werden. Ansonsten enden andere Dateien, die vor den benötigten Frameworks geladen werden, vermutlich mit JS-Ausnahmen.

Einige Templates wie Protostar oder Beez, fügen alle Abhängigkeiten ein die Sie benötigen, indem Sie Funktionen wie z.B.

JHtml::_('bootstrap.framework');

um Jquery + Bootstrap zu laden. Aber Sie sollten sich in dieser Tatsache nicht auf Ihre Erweiterungen oder eigenen Template-Overrides verlassen. Stellen Sie immer sicher, dass Ihre Erweiterung oder Ihr Overrides die Abhängigkeiten lädt, die Sie benötigen, bevor das Template es tut. ich werde später erklären, warum:

Zum Beispiel ein Template-Override, welches eine JS-Datei mit einigen Jquery-Skripten einfügt und die auf allen Seiten, auf denen dieses Template-Override verwendet wird, ansprechende Dinge tut. In diesem Fall solltest du dies im oberen Abschnitt der Override-Datei deklarieren:

JHtml::_('jquery.framework');
$doc->addScript('templates/'.$this->template.'/js/fancy-script.js');

Wenn Sie eine Erweirerung entwicklen und planen diese im Joomla!-Extension-Directory zu veröffentlichen, sollten Sie folgendes tun:

if($params->get('add_extension_resources', false))
{
    JHtml::_('jquery.framework');
    $doc->addScript('media/com_fancy/js/fancy-script.js');
}

The conditional clause to decide whether to add or not the extension resources is strongly encouraged and considered a good practice because it gives flexibility to 3rd party developers who don't want to use your extension resources and use custom/modified files without having to battle with Joomla! using workarounds and hacks to be able to remove your original extensions resources in order to avoid duplicates and conflicts.

Erklärung

Wenn Sie den Quellcode der index.php aus der Protostar-Template überprüfen, können Sie sehen, dass die Aussage

JHtml::_('bootstrap.framework');

wird weit vor der Anweisung hinzugefügt.

<jdoc:include type="head" />

dies fürhrt zu der Annahme, dass die Framework-Dateien und Ihre 3rd-Party-Dateien mit Methoden wie z.B.

$doc->addScript('templates/'.$this->template.'/js/fancy-script.js');
$doc->addScript('media/com_fancy/js/fancy-script.js');

will be added in the right order at the right spot, but that is not the case, because extension files and template override files are processed first and the index.php file of your current template is processed the last. This will cause that your custom JS files get inserted first and the framework files inserted from the template get inserted after.

Dies geschieht, weil die Joomla! API (z.B. $doc->addScript) ein Array verwendet, um die JS-Dateipfade zu speichern. Sie werden im Dokument in der gleichen Reihenfolge gerendert, wie sie in dieses Array eingefügt wurden (FIFO-Stapel).

Sobald ein Dateipfad in das Array eingefügt wird und ein anderer API-Aufruf versucht, die gleiche Datei einzufügen, wird diese Aktion ignoriert, um Duplikate zu vermeiden.

Das bedeutet auch, dass die Reihenfolge der Dateien nicht verändert wird, wenn versucht wird, dieselben Dateien mehrmals einzufügen.

Abgesehen davon, dass er dies tut.

JHtml::_('jquery.framework');
$doc->addScript('templates/'.$this->template.'/js/fancy-script.js');

at your custom templates overrides and extension, is required and does not cause harm or conflict with the call

JHtml::_('bootstrap.framework');

in der index.php Datei Ihres Templates.

Externe Links

Joomla 2.5 https://api.joomla.org/cms-2.5/classes/JHtmlBehavior.html#method_framework

Joomla 3.x https://api.joomla.org/cms-3/classes/JHtmlBehavior.html#method_framework

http://en.wikipedia.org/wiki/JavaScript

http://www.w3schools.com/js/default.asp

http://mootools.net/

http://jquery.com/