HTML, CSS und JavaScript

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

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

was kann JavaScript - w3schools.com - Stepping Into UX

Bild-Quelle:  https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb
weitere:
https://www.w3schools.com/html/html_intro.asp
https://www.w3schools.com/css/css_howto.asp
https://www.w3schools.com/js/js_whereto.asp
https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
https://www.w3schools.com/js/

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden /  Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden /  Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )

Verbinde mit %s