WEBT HSLU Theorie

• Können im Body oder im Head sein
• <script></script>
• Programme können auch in einer eigenen Datei stehen

- Number
- String
- Boolean
- Object

• Damit manche Variablen oder Werte nicht jedes Mal überschrieben werden oder man muss auf die Werte immer wieder zugreifen und nicht verändern, kann man Werte in den Web Storage speichern und dynamisch abrufen oder auch aktualisieren/verändern.
• Web Storage ist eine W3C-Spezifikation und erlaubt das Speichern von Daten auf mobilen Endgeräten bis zum
  • Ende einer Session (Session Storage) oder
  • darüber hinaus (Local Storage)
• Datenformat des WebStorage / LocalStorage
• Daten werden in Key-Value-Paaren gespeichert. Daten werden immer einem selbst definierten Schlüssel zugewiesen und im String Format gespeichert

•  Sicherheit: Hat Zugang zu privaten Daten des Servers
• Kompabilität: nicht browser-abhängig, daher leichter Kompabilität sicherzustelle
• Mächtigkeit: Files schreiben, Verbindung aufbauen, Datenbank verbinden -> keine Sandbox

• Repräsentiert HTML-Dokument als Baumstruktur
• Zugriff auf DOM mit JavaScript möglich

Wie bei Java
Bsp. ==, !=, < ...

• Ajax-Anwendungen zeigen nicht die üblichen Verzögerungszeiten und vermitteln so das Gefühl, mit einer lokal laufenden Anwendung zu arbeiten

• Methode getElementById():
• Variable document
  • Von JavaScript vordefiniert
• gesuchte id wird als Parameter mitgegeben

• Fasst in weiteren Sinn eine Reihe von Webtechnologien zusammen:
  • Weiterentwicklung in HTML und CSS sowie JavaScript APIs
• Einbettung von Medien in Webseiten ohne zusätzliche Plug-ins.
• Unterstützung mobiler Engeräte, insbesondere:
  • Persistenz
  • geräteabhängige Medienauswahl und Auslieferung

• leichtgewichtige Programmiersprache ("scripting language")
•  Verwendung für interaktive zu machen
• Dynamisch Text einbetten in HTML
• Auf Aktionen reagieren
• Informationen vom Computer des Benutzers auslesen
• Ein Webstandard
•  Nicht direkt verwandt mit Java

• <Protokoll>://<Webserver><Domainname>/<Pfadangabe und Dateiname>
• http://www.greenpeace.org/aboutUs/overview.html$

- Ähnlich wie in Java
- Wiederhole Anweisungen mithilfe einer Schleife mehrfach

<body> kann mehrere Pages beinhalten

• onclick
• onload
• onmousedown
• onmouseup
• onmouseover
• onmousemove

• Zuerst soll der Wert aus dem HTML-Element in die Variable „el“ gespeichert werden.
• Danach wird geprüft, ob „el.checked“ (Extra Funktion des radio buttons) aktiviert wurde.
• Ist die der Fall, wird dann eine Meldung angezeigt

• Kommentare wie in C /* beliebig langer Kommentar */ // nur bis Zeilenende
• Variablen werden durch $ am Anfang des Bezeichners markiert
• $wert = 1;
• Es wird zwischen Gross- und Kleinschreibung unterschieden
• PHP unterstützt keine expliziten Typ-Definitionen bei der Deklaration von Variablen
• Typ einer Variablen wird durch den Zusammenhang bestimmt in dem die Variable benutzt wird

• $("p") wählt ALLE <p> Elemente aus
• $(".intro") wählt Elemente mit class="intro“ aus
• $("#demo") wählt Element mit id="demo

Typischerweise: Verarbeitung von Formulardaten
Ablauf der Kommunikation zwischen Client und Server:
 

• Einfache statische Webauftritte, z.B. Webseite einer Person.
• Meist mit Applets programmiert.
• Java Programm, dass sich auf einem Webserver befindet.
• Wenn mit Applet; Applet wird herunter geladen und im Browser ausgeführt.

Fazit: Interessant bei sich selten ändernden Daten und vielen Zugriffen.

- Amazon.de (DB-orientierte Web-Applikation)
- Xignite.com (Webservices)

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1></h1>
<p></p>
</body>
</html>

Anwendung die Benutzer-System-Interaktion auch über das Web ermöglicht.

margin = Rand {margin:10px}
padding = Polsterung {padding:10px}
border = Rahmen {border-width:10px; border-style:solid}

• XML dient der Strukturierung von Daten
• XML Markups
  • sind frei definierbar
  • bestehen immer aus einem Start-Tag und einem End-Tag

<marke></marke>

• dürfen verschachtelt werden, z.B.

<m1><m2></m2></m1> nicht jedoch über Kreuz

• -> Wohlgeformtheit eines Dokuments
• XML Element: Text von Starttag bis Endtag einschliesslich der Unterstrukturen
  • z.B. <m1>element</m1>
• XML Attribut: XML Elemente können durch Attribute erweitert werden
  • z.B. <m1 attribute1=“wert“>element</m1>

• Sollen die Entwicklung eine Software vereinfachen, d.h. weniger Programmieraufwand
  generieren
   

p.normal {text-align:justify}
in HTML: <p class="normal">Text</p>

selector{prop1:value1; prop2:value2...}
body{color:black}

• Anzeige der aktuellen Position eines Benutzers
• Anzeige weiterer Standorte (z.B. Sehenswürdigkeit)
• Anzeigen einer Route (z.B. vom eigenen Standort zu einer Sehenswürdigkeit)
• Anzeigen von Entfernungen
• Auswahl Kartenanzeige (z.B. Satellitenkarte, Strassenkarte)
• Unterschieden werden:
  • Statische Karten
  • Dynamische Karten

• Läuft auf Clientseite ab nachdem die Seite vom Server geladen wurde.
• Reagiert auf User-Aktionen

p#navi{color:red}
<p id="navi">Text</p>

Id Attribute sind einziartig.