HTML, CSS und JavaScript sind ein gut eingespieltes Trio im Frontend-Webdesign. Nach der kurzen Berührung mit HTML und CSS möchte ich wissen welche Rolle JS dabei spielt.
Die Vorstellung, nach einem Abend bereits selber JS-Codes in meine Navigation-Bar einbauen zu können scheitert am Umfang. Ich gebe mich mit vorprogrammierten Beispielen zufrieden und der Erklärung wozu welche Sprache eingesetzt wird.
Alle drei Sprachen dienen dem Frontend-Design, also dem was der Web-User unmittelbar vor sich sieht. Auf Server-Seite kommen andere Sprachen wie SQL, PHP, ASP oder Node.js zum Zug, aber das ist ein anderes Thema.
HTML:
- steht für Hyper Text Markup Language
- definiert den Inhalt und die Struktur von Webseiten:
Text, Medien, Listen, Tabellen, etc. - zählt zu den Markup-Sprachen, nicht zu den Programmiersprachen
- wird eingeleitet und abgeschlossen mit den Tags: <html> und </html>
- besitzt „header“ und „body“
CSS:
- steht für Cascading Style Sheets
- spezifiziert das Aussehen, also den Style von HTML Elementen:
Farbe, Backgrounds, Rahmen, Ränder von Elementen in Pixeln, Schriften, Ausrichtung von Elementen etc. - neuere Versionen sind „Responsive CSS“ und „CSS3“
- kann direkt in den HTML Code geschrieben werden oder praktischerweise von externen Files mit der Endung .css importiert werden (fertige Module)
- kann auf drei Arten eingeleitet werden:
- a) als externes Style-Sheet über das <link> Element im HTML-Head <head> </head>.
Mit href=““ wird das externe File eingebunden. Globaler Charakter: ein Style Sheet kann auf einfache Weise für mehrere Webseiten genutzt werden, Globale Änderungen sind einfach zu bewerkstelligen. - b) als internes Style-Sheet über das <style> Element im HTML-Head <head> </head>.
Der Code wird direkt ins HTML Dokument geschrieben und ist dann nützlich, wenn eine Seite ein individuelles Aussehen verleiht wird. - c) als InlineStyle.
Mit dem Befehl „style=“ direkt in einem HTML Element, wird dieses individuell angepasst
- a) als externes Style-Sheet über das <link> Element im HTML-Head <head> </head>.
JavaScript:
- Definiert das Verhalten von Webseiten: zum Beispiel was beim Drücken eines Buttons passiert der kein Hyperlink ist.
- ist die Programmiersprache zu HTML
- ändert HTML-Content
- JavaScript hat nichts mit Java zu tun
- muss über den Tag eingeleitet und beendet werden
- kann auf viele Arten über getElementById(). internen HTML-Inhalt aufrufen und verändern. Zum Beispiel
- Text (document.getElementById().inner.html = “ „)
- Bilder (document.getElementById().src= “ „)
- HTML-Styles verändern (document.getElementById().style.fontSize = “ „)
- HTML-Styles anzeigen (document.getElementById().style.display = “ „)
- externes .js file wird über den Befehl aufgerufen: function myFunction()
- kann in den <head> </head> sowie auch <body> </body> Bereich eingesetzt werden
Ein einfaches Beispiel für JavaScript
Stepping Into UX 