JavaScript: Unterschied zwischen den Versionen
(→Definition) |
(→Definition) |
||
Zeile 9: | Zeile 9: | ||
[[File:Javascript-head-wdf-idf.png|link=|border|alt=JavaScript HTML|Screenshot von JavaScript innerhalb des HTML-Codes]] | [[File:Javascript-head-wdf-idf.png|link=|border|alt=JavaScript HTML|Screenshot von JavaScript innerhalb des HTML-Codes]] | ||
− | [[File:Javascript-beispiel.jpg|link=|border| | + | [[File:Javascript-beispiel.jpg|link=|border|600px|alt=JavasScript Beispiel|Screenshot einer JavaScript Datei]] |
Ein Beispiel von JavaScript-Dateien auf unserer [https://www.seobility.net/de/wdf-idf-tool/ WDF-IDF-Tool]-Seite | Ein Beispiel von JavaScript-Dateien auf unserer [https://www.seobility.net/de/wdf-idf-tool/ WDF-IDF-Tool]-Seite |
Version vom 22. Juni 2021, 12:37 Uhr
Inhaltsverzeichnis
Definition
JavaScript – oft abgekürzt als JS – ist eine Skriptsprache, mit der Webentwickler interaktive Webseiten erstellen können. Neben HTML und CSS ist JavaScript eine der am häufigsten verwendeten Programmiersprachen in der Webentwicklung.
In der Vergangenheit wurde JavaScript hauptsächlich für die Frontend-Entwicklung verwendet. Allerdings hat es auch in der Backend-Entwicklung durch Frameworks wie Node.js an Popularität gewonnen.
Ein Beispiel von JavaScript-Dateien auf unserer WDF-IDF-Tool-Seite
Wofür wird JavaScript verwendet?
JavaScript wird für verschiedene Anwendungen im Web genutzt, z. B. für automatisch aktualisierte Newsfeeds, Formulare, Suchfunktionen und andere interaktive Funktionen. Nahezu alle interaktiven Funktionen, die auf Webseiten zu finden sind, werden mit JavaScript erstellt.
Da es von allen gängigen Browsern unterstützt wird, ist JS in der Frontend-Entwicklung weit verbreitet. Es findet aber auch in anderen Bereichen Verwendung, wie z. B. in der mobilen Entwicklung, der Spieleentwicklung und der Backend-Entwicklung.
JavaScript-Bibliotheken und -Frameworks
Um die Programmierung zu erleichtern, gibt es zahlreiche sogenannter JS-Bibliotheken und -Frameworks. JavaScript-Bibliotheken werden verwendet, um Codes für komplexere Funktionalitäten schneller schreiben zu können. Sie ermöglichen es Entwicklern, vorgefertigte Code-Snippets zu nutzen und eigene Code-Snippets für die zukünftige Verwendung zu erstellen und zu speichern.
JavaScript-Frameworks sind Vorlagen, die eine Codestruktur vorgeben, welcher man dann einfach folgen kann. Dadurch wird die Entwicklung einerseits erleichtert, jedoch gibt es andererseits Einschränkungen, die ein Entwickler beachten muss.
Beispiele für JS-Bibliotheken sind:
- jQuery
- ReactJS
- Dojo-Toolkit
- Google Polymer
Beispiele für JS-Frameworks sind:
- AngularJS
- Vue.js
- Apache Royale
Wird JavaScript ohne die Verwendung von Bibliotheken oder Frameworks geschrieben, wird es als „Vanilla-JavaScript“ bezeichnet.
Clientseitiges JavaScript vs. serverseitiges JavaScript
JavaScript kann sowohl clientseitig als auch serverseitig eingesetzt werden. Clientseitiges JavaScript macht eine Manipulation von Browsern und Webseiten möglich. Es führt das Skript im Browser des Nutzers aus und ist eine der häufigsten Verwendungsformen von JavaScript.
Serverseitiges JavaScript läuft nicht im Browser, sondern auf dem Server. Generell ist es weniger verbreitet als clientseitiges JavaScript. Ein Beispiel für ein beliebtes serverseitiges Scripting-Framework für JavaScript ist Node.js.
JavaScript und Suchmaschinen
Obwohl JavaScript eine wichtige Programmiersprache für die Webentwicklung ist, ist es für Suchmaschinen nicht immer einfach zu verarbeiten. Wenn das JavaScript auf einer Seite nicht für Suchmaschinen-Crawler optimiert ist, kann es zu SEO-Problemen kommen.
Dies gilt insbesondere für Websites, die wichtige Inhalte, Links oder andere Ressourcen mit JavaScript anstelle von HTML und CSS bereitstellen. Hierbei kann zu es Problemen beim Crawling kommen, da es sein kann, dass Inhalte für Nutzer verfügbar sind, für Suchmaschinen-Crawler jedoch nicht.
Google indexiert und rendert Seiten im Web getrennt voneinander, weil das Ausführen eines Skripts mehr Ressourcen beansprucht. Aus diesem Grund haben Suchmaschinen wie Google gelegentlich Schwierigkeiten mit JavaScript.
Das Rendering kostet mehr Zeit und Ressourcen, weshalb diese beiden Schritte aufgeteilt werden, sodass HTML und CSS schneller indexiert werden. Das bedeutet, dass die Verarbeitung von JavaScript Inhalten länger dauern kann, wodurch die Indexierung mehr Zeit in Anspruch nimmt.
In den letzten Jahren sind große Suchmaschinen wie Google besser darin geworden, JavaScript zu crawlen und zu indexieren. Viele kleinere Suchmaschinen oder andere Crawler können hingegen immer noch Probleme beim Laden von JavaScript haben.
Einige Rendering-Methoden können Crawlern dabei helfen, JavaScript zu verarbeiten, nämlich:
Serverseitiges Rendering
Wenn JavaScript serverseitig statt clientseitig gerendert wird, wird sowohl Nutzern als auch Crawlern die vollständig gerenderte Seite angezeigt. Dadurch lassen sich viele der SEO-Probleme verhindern, die JavaScript verursachen kann. Allerdings nimmt es auch viele Server-Ressourcen in Anspruch.
Dynamic Rendering
Durch Dynamic Rendering können serverseitig gerenderte Ressourcen an Crawler gesendet werden, während andere Nutzer Inhalte auf der Clientseite rendern können. Dies verhindert nicht nur SEO-Probleme beim Crawling und der Indexierung, sondern auch eine zusätzliche Belastung des Servers.
Hybrid Rendering
Beim Hybrid Rendering werden die wichtigen Ressourcen auf der Serverseite und die weniger wichtigen Inhalte auf der Clientseite gerendert. Dadurch wird die Last zwischen dem Browser des Clients und dem Server verteilt, während die Crawler die wichtigen Inhalte sofort sehen können.
Die Bedeutung für Webentwicklung und SEO
JavaScript ist eine der wichtigsten Programmiersprachen. Sie ist sehr dynamisch und wird sowohl in der Frontend- als auch in der Backend-Webentwicklung verwendet.
Angesichts der möglichen Auswirkungen auf die SEO sowie auf die Geschwindigkeit und Performance einer Seite ist es wichtig zu verstehen, wie JavaScript funktioniert. Anhand von Best Practices kann man lernen, effektiver zu programmieren und die Leistung einer Website zu verbessern.
Weiterführende Links
- https://developers.google.com/search/docs/guides/javascript-seo-basics?hl=de
- https://developers.google.com/search/docs/guides/fix-search-javascript?hl=de
- https://www.enable-javascript.com/de/