HTML5-Tutorium: JavaScript: Hello World: Unterschied zwischen den Versionen

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
(12 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}
{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}
==Ziel==
==Ziel==
In diesem Tutorium wird beschrieben, wie man in [[HTML5]] eine interaktive Hello-World-Web-Anwendung mit Hilfe
In diesem Tutorium wird beschrieben, wie man in [[HTML5]] eine interaktive Hello-World-Web-Anwendung mit Hilfe
Zeile 5: Zeile 6:


==Voraussetzungen==
==Voraussetzungen==
Dieses Tutorium wendet sich an Studierende des dritten Semesters [[IAM|Interaktive Medien]].
Dieses Tutorium wendet sich an Studierende des vierte Semesters [[IAM|Interaktive Medien]].
Es wurde und wird im Rahmen der Lehrveranstaltung   
Es wurde und wird im Rahmen der Lehrveranstaltung   
[[Lehrveranstaltung:IAM_2006:Multimedia-Anwendungen/Programmierung|Multimedia-Anwendungen/Programmierung]] (MMProg) entwickelt.
[[Modul:IAM (SPO 2018):Web-Programmierung|Web-Programmierung]] (WebProg) entwickelt.
 
In den ersten Semestern des Studiums wurden bereits Programmiererfahrung mit [[Processing]] und
[[Java]] erworben: [[Modul:IAM 2006:Softwareentwicklung und Programmierung|Softwareentwicklung und Programmierung]].
Daher werden einfache objektorientierte Programmierprinzipien
([[If-Anweisung]]en, [[Schleife]]n, [[Objekt]]e, [[Methode]]n etc.) als bekannt vorausgesetzt. Wichtige Unterschiede zu anderen Programmiersprachen
werden selbstverständlich behandelt.
 
Die Kenntnis von [[HTML]] und [[CSS]] wird ebenfalls vorausgesetzt. Diese Kenntnisse werden in der Veranstaltung
[[Lehrveranstaltung:IAM_2006:Multimedia-Anwendungen/Gestaltung|Multimedia-Anwendungen/Gestaltung]]  vermittelt,
welche parallel zu MMProg angeboten wird. Im Rahmen dieses Tutoriums werden nur diejenigen HTML- und CSS-Kenntnisse
besprochen, die für das Verständnis der Inhalte notwendig sind.
 
[[Web-Server]], wie [[Web2py]], [[Apache]], [[Tomcat]], [[Node.js]] liefern HTML-Seiten, CSS-Dateien und JavaScript-Code nicht nur aus,
sondern können auch dazu verwendet werden, derartige Dokumente dynamisch zu erstellen, das heißt im Moment der Anforderung durch den Benutzer.
Dies ist Inhalt der Vorlesung [[Lehrveranstaltung:IAM 2006:Netzwerktechnologien I|Netzwerktechnologien I]], die ebenfalls für Studierende des dritten Semesters angeboten wird.


Inhalt der Vorlesung MMProg ist die dynamische Veränderungen von HTML-Seiten auf dem Client (Browser).  
Sie sollten die [[HTML5-Tutorium: JavaScript: Entwicklungsumgebung|Node.js-Entwicklungsumgebung]] bereits installiert haben.
Damit lassen sich beispielsweise [[Browserspiele]] realisieren. Dies geschieht mit Hilfe von JavaScript.


===Use Cases===
===Use Cases===
Zeile 32: Zeile 17:


==Tutorium==
==Tutorium==
# [[HTML5-Tutorium: JavaScript: Hello World 01|Teil 1]]: Erstellen einer Web-Anwendung ([[HTML]]) mittels [[WebStorm]], die <code>Hallo, Welt!</code> ausgibt. Diese Anwendung wird in einem Git-Repository gespeichert.
* [[HTML5-Tutorium: JavaScript: Hello World 01|Teil 1]]: Erstellen einer Web-Anwendung ([[HTML]]) mittels [[Visual Studio Code]], die <br/>&nbsp;&nbsp;<code>Hallo, Welt!</code>&nbsp;&nbsp;<br/> ausgibt. Diese Anwendung wird in einem [[Git]]-Repository gespeichert.
# [[HTML5-Tutorium: JavaScript: Hello World 02|Teil 2]]: Layouten der  Hello-World-Web-Anwendung mittels [[CSS]].
 
# [[HTML5-Tutorium: JavaScript: Hello World 03|Teil 3]]: Dynamisieren der  Hello-World-Web-Anwendung mittels  [[JavaScript]] (<code>Hallo, &lt;Benutzername&gt;!</code>).<!--
* [[HTML5-Tutorium: JavaScript: Hello World 02|Teil 2]]: Layouten der  Hello-World-Web-Anwendung mittels [[CSS]].
# [[HTML5-Tutorium: JavaScript: Hello World 04|Teil 4]]: Verbesserung der Web-Anwendung: Modularisierung, Beschleunigung des Ladevorgangs, automatische Komprimierung der CSS- und JavaScript-Dateien.
* [[HTML5-Tutorium: JavaScript: Hello World 03|Teil 3]]: Dynamisieren der  Hello-World-Web-Anwendung mittels  [[JavaScript]] (<code>Hallo, &lt;Benutzername&gt;!</code>)
# [[HTML5-Tutorium: JavaScript: Hello World 05|Teil 5]]: Duplizierung der Anwendung mit Hilfe einer Klasse.-->
 
* [[HTML5-Tutorium: JavaScript: Hello World 04|Teil 4]]: Verbesserung der Web-Anwendung: Modularisierung, Beschleunigung des Ladevorgangs
* [[HTML5-Tutorium: JavaScript: Hello World 05|Teil 5]]: Automatische Komprimierung der CSS- und JavaScript-Dateien mittels Webpack<!--, Duplizierung der Anwendung mit Hilfe einer Klasse.-->
* [[HTML5-Tutorium: JavaScript: Hello World 06|Teil 6]]: Verwendung von SCSS an Stelle von CSS


==Quellen==
==Quellen==
# {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}
# {{Quelle|Kowarschick, W.: Web-Programmierung}}
# [http://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/ Musterlösungen]


==Siehe auch==
==Siehe auch==

Version vom 20. April 2022, 15:01 Uhr

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:

Korrektheit: 3
(zu größeren Teilen überprüft) 		Umfang: 4
(unwichtige Fakten fehlen) 		Quellenangaben: 3
(wichtige Quellen vorhanden) 		Quellenarten: 5
(ausgezeichnet) 		Konformität: 3
(gut)

Vorlesung WebProg

Inhalt | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5 | Teil 6

Ziel

In diesem Tutorium wird beschrieben, wie man in HTML5 eine interaktive Hello-World-Web-Anwendung mit Hilfe von JavaScript erstellt.

Voraussetzungen

Dieses Tutorium wendet sich an Studierende des vierte Semesters Interaktive Medien. Es wurde und wird im Rahmen der Lehrveranstaltung Web-Programmierung (WebProg) entwickelt.

Sie sollten die Node.js-Entwicklungsumgebung bereits installiert haben.

Use Cases

Es wird eine personalisierte HTML-Seite erstellt: Der Benutzer wird nach seinem Namen gefragt und dieser wird anschließend in die aktuelle HTML-Seite (mittels JavaScript) eingefügt.

Tutorium

  • Teil 1: Erstellen einer Web-Anwendung (HTML) mittels Visual Studio Code, die
      Hallo, Welt!  
    ausgibt. Diese Anwendung wird in einem Git-Repository gespeichert.
  • Teil 2: Layouten der Hello-World-Web-Anwendung mittels CSS.
  • Teil 3: Dynamisieren der Hello-World-Web-Anwendung mittels JavaScript (Hallo, <Benutzername>!)
  • Teil 4: Verbesserung der Web-Anwendung: Modularisierung, Beschleunigung des Ladevorgangs
  • Teil 5: Automatische Komprimierung der CSS- und JavaScript-Dateien mittels Webpack
  • Teil 6: Verwendung von SCSS an Stelle von CSS

Quellen

  1. Kowarschick (WebProg): Wolfgang Kowarschick; Vorlesung „Web-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2024; Quellengüte: 3 (Vorlesung)

Siehe auch

Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=HTML5-Tutorium:_JavaScript:_Hello_World&oldid=50824“