"Ich würde mir vorstellen, es gibt noch eine Menge, die Sie ohne Javascript tun können" - lustig, nicht so lange her, haben wir alles ohne Javascript.
Der beste Ansatz ist, was als ‚Progressive Enhancement‘ bekannt ist. Das Prinzip besteht darin, etwas zu erstellen, das ohne JavaScript funktioniert, und dann zusätzliche Verhaltensweisen zu "schichten", indem das JavaScript an die Objekte gebunden wird.Bibliotheken wie jQuery machen dies einfach, da sie CSS-Selektoren unterstützen. Auf diese Weise können Sie JS-Verhalten fast genauso anwenden, wie Sie CSS anwenden würden (OK, eine leichte Übertreibung).
Es gibt Überlegungen, darüber nachzudenken, was eine gute Grundlinie ist und wie Seiten geändert werden sollten.
Oft ist die eigentliche Mehrarbeit auf der Serverseite, wo Sie möglicherweise mehrere Anfrageverarbeitungssysteme haben müssen. Es ist ein bisschen ein großes Feld in einer kleinen Antwort anzusprechen!
Auch darüber nachzudenken, wer und warum Benutzer nicht Javascript verwenden. Here's something I wrote a while ago on the subject sollten Sie interessiert sein.
Ein Beispiel? Nehmen Sie etwas einfach, z. Sie möchten nette "Tooltips" nach Formularfeldern anzeigen, wenn der Benutzer zu ihnen mauset. Im HTML, diese (zum Beispiel) könnten als Ziffern gekennzeichnet werden:
<label for="username">User name</label><input type="text" id="username" />
<p>Username must be between 6-8 characters</p>
Für nicht JS Benutzer kann die Eingabeaufforderung einfach als netten Absatz angezeigt werden. Du machst das also mit CSS. Haben Sie zusätzliches CSS für JS-Benutzer, die den Absatz standardmäßig ausblenden. Also: 2 Sätze CSS, einer überschreibt den anderen.
nicht JS:
form p {
margin: 10px 0 0 0;
border-bottom: 1px solid grey;
}
js:
form p {
position: absolute; display: none;
width: 180px;
background-image: url(nice-bubble.gif);
padding: 10px;
}
Wie Sie CSS für JS/nicht JS Situationen anzuwenden ist bei Ihnen. Es gibt zahlreiche Möglichkeiten. Persönlich möchte ich für JS im CSS codieren und habe eine noscript.css-Variante (d. H. Rückwärts arbeiten) in einem Tag. Das ist kein gültiges XHTML, aber es funktioniert gut.
Dann haben Sie ein JS, das nach den Elementen sucht und den Anzeigecode für die Tooltips verwaltet. zB:
$(document).ready(function() {
$('form input').focus(function() {...display paragraph...});
// etc;
})
Das ist Pseudo-Code, aber Sie bekommen das Bild. Was Sie am Ende haben ist 1 Satz HTML, mit 2 Präsentationen und zusätzlichen Verhaltensweisen, und keine JS in Ihrem HTML selbst verwickelt.
Möchten Sie mir sagen, warum Sie mich abgelehnt haben? –