javascript, html5, css3technischeredaktion.com/webtech/html_css_js_folien/... ·...

Hochschule Karlsruhe Technik & Wirtschaft Internet-Technologien T3B250 Prof. Dipl.-Ing. Martin Schober

Javascript


Eigenschaften

• Entwicklung von Netscape

• kein direkter Bestandteil von HTML, sondern eine eigene Programmiersprache

• Plattformunabhängige Skriptsprache

• Objektorientiert

• Java ähnliche Syntax (hat jedoch mit Java nichts zu tun!)

• JavaScript lässt sich im Browser ein-/ausschalten_IEBrowser ein-/ausschalten_Firefox

• Steuert HTML und CSS

• Unterschiedliche Implementierungen FireFox/Mozilla und Microsoft, die jedoch untereinander weitgehend kompatibel sind. (Explorer JScript)


Warum Javascript?

• JavaScript erweitert die beschränkten Möglichkeiten von HTML

• Clientseitige Programmiersprache (Alles läuft im Browser ab!)

• HTML5 = HTML + JavaScript + CSS

• AJAX (Asynchronous JavaScript And XML) Web 2.0-Technologie

• Interaktive PDF-Dateien mit JavaScript

• Interaktive 3D-Animationen im PDF mit JavasScript

• SVG (Scalable Vector Graphics) programmierbar mit JavaScript

• Flash-Programmiersprache Actionscript 2.0 ähnlich wie JS

• Zukünftig kann Flash auch mit JavaScript programmiert werden

• Photoshop und InDesign können mit JavaScript gesteuert werden


Client-Seitige Ausführung

• JavaScript läuft in einer so genannten "Sandbox". Das ist eine Art Sicherheitskäfig, in dem die Programmiersprache eingesperrt ist.

• Sie wird dabei um typische Möglichkeiten anderer Programmiersprachen beschnitten, vor allem um die Möglichkeit, beliebig Daten aus Dateien lesen und in Dateien schreiben zu können.

• So soll verhindert werden, dass JavaScript-Programmierer auf den Rechnern von Anwendern, die eine JavaScript-unterstützte Web-Seite aufrufen, Unfug treiben können.


Aufgaben JavaScript

• Steuern von Aussehen und Inhalt der Dokumente

• Steuern des Browsers

• Interaktion mit HTML-Formularen

• Interaktion mit dem Benutzer

• Lesen und Schreiben des Client-Zustandes mit Cookies


Aufgaben JavaScript

• Steuern von Aussehen und Inhalt der Dokumente

• Methode write()

• DocumentObjectModel (DOM)

• Veränderung der CSS-Attribute aller Elemente

• Steuern des Browsers- das Window-Objekt - Dateneingabe vom Benutzer

Meldungen anzeigenEingaben einholenNachrichten in der Statuszeile

- das History-Objekt, die schon besuchten Seiten Navigation Vor- und Zurück des Browsers


Aufgaben JavaScript

Interaktion mit HTML-Formularen

• Einlesen der Eingabe-Elemente

• Formulare validieren

• Berechnungen durchführen (günstigere clientseitige Berechnung!)

• Ausgabe

Interaktion mit dem Benutzer

• Definition von Event-Handler (Ereignisorientierte Programmierung)

• z.B. Mouse-Over, Schaltflächen drücken


Aufgaben Javascript

Lesen und Schreiben des Client-Zustandes mit Cookies

• Cookie = eine kleine Menge von Zustandsdaten, die permanent oder temporär im Client-Rechner gespeichert werden

• sie können mittels JavaScript geschrieben und gelesen werden

Zusammenarbeit mit eingebetteten Objekten

• Videos, x3d, webGL, glTF, SVG, PDF

Browser-Eigenschaften lesen

• Browser-Version

Hardware-Eigenschaften lesen

• Screen-Objekt liefert Informationen über Größe und Farbtiefe des Monitors


Was JavaScript nicht kann

• Keine andere Grafikfähigkeit außer HTML-Elemente zu erzeugen

• Aus Sicherheitsgründen – kein Zugriff auf das Dateisystem

• Keine Netzwerk-Funktionalität

- Downloaden- Über Serverseitige-Skripte Uploaden- E-Mail schicken


Javascript und Suchmaschinen

JavaScript am Ende der HTML-Seite einbauen.

Die ersten Zeilen eines Dokumentes werden oft als Seitenbeschreibung verwendet oder werden besonders, bei Vorkommen eines Schlüsselwortes, bewertet.

Falls die Ausführung des JavaScripts nicht behindert wird, ist der Code besser am Ende des Dokumentes einzusetzen.


JavaScript in HTML definieren

<script>…</script>

• in Head oder Body

• keine feste Vorschrift


Möglichkeit 1 Javascript in HTML einzubinden

1. Im Kopf(<head>) oder Körper(<body>) der HTML-Datei.

<html><head><title>Beispiel für Javascript</title><script>

alert("Hallo Welt!");</script></head><body></body>

</html>

U01_Alert_Fenster.htmlU01_Prompt_Eingabefenster.htmlhttps://technischeredaktion.com/webtech/HTML_CSS_JS_Folien/Folienbsp12_JS_Einfuehrung/u01\U01_Alert_Fenster.htmlhttps://technischeredaktion.com/webtech/HTML_CSS_JS_Folien/Folienbsp12_JS_Einfuehrung/u01\U01_Prompt_Eingabefenster.html

https://technischeredaktion.com/webtech/HTML_CSS_JS_Folien/Folienbsp12_JS_Einfuehrung/u01/U01_Alert_Fenster.html

https://technischeredaktion.com/webtech/HTML_CSS_JS_Folien/Folienbsp12_JS_Einfuehrung/u01/U01_Prompt_Eingabefenster.html


Möglichkeit 2 JavaScript in HTML einzubinden

2. Bei einem Ereignis innerhalb der HTML-Seite.

<html><head><title>Eigenschaften</title></head><body bgcolor="#FFFF00">

<a href="#" onclick="document.bgColor='red'"> Hintergrundfarbe ändern!</a>

</body></html>

U02_JS_in_HTMLbereich.htmlU02_bgcolor_Image.htmlhttps://technischeredaktion.com/webtech/HTML_CSS_JS_Folien/Folienbsp12_JS_Einfuehrung/u02/U02_JS_in_HTMLbereich.htmlhttps://technischeredaktion.com/webtech/HTML_CSS_JS_Folien/Folienbsp12_JS_Einfuehrung/u02/u02/U02_bgcolor_Image.html

https://technischeredaktion.com/webtech/HTML_CSS_JS_Folien/Folienbsp12_JS_Einfuehrung/u02/U02_JS_in_HTMLbereich.html

https://technischeredaktion.com/webtech/HTML_CSS_JS_Folien/Folienbsp12_JS_Einfuehrung/u02/U02_bgcolor_Image.html



<!doctype html><html><head><meta charset="utf-8"><title>Unbenanntes Dokument</title></head><style>body {

background-color: #F3DC0D;}

</style><body><a href="#" onClick="document.body.style.backgroundColor = 'green'"> 1 Farbe aendern!</a><br />

<a href="#" onClick="document.body.style.backgroundColor = '#FF0000'"> 2 Farbe aendern!</a><br/>

<a href="#" onClick="document.getElementsByTagName('body')[0].style.backgroundColor = '#0000FF'"> 3 Farbe aendern!</a>

</body></html>



3. Als externe Datei.

<html><head><title>JavaScript-Test</title>

<script src="separat.js"></script>

</head><body><form>

<input type=button value="Quadrat von 6 errechnen" onClick="Quadrat(6)"></form></body></html>

Externe Datei: separat.js

function Quadrat(Zahl){Ergebnis = Zahl * Zahl;alert("Das Quadrat von " + Zahl + " = " + Ergebnis);}


Möglichkeiten JavaScript in HTML einzubinden

4. In einem Link mit javascript:.

<html><head>

<title>Javascript im Link</title></head><body>

<a href="javascript:alert('Hello world!!!')">Alert-Fenster öffnen!</a>

</body></html>


Lexikalische Struktur

Die Menge der elementaren Regeln, die Angeben, wie man Programme in dieser Sprache schreibt.

- aussehen der Variablennamen (a, test, test1, 2test_x, …)

- Objekte (document, frames, window, math, …)

- Methoden (z.B. window.open(…) neues Fenster öffnen)

- Eigenschaften (z.B. window.innerHeight) Innere Höhe des Fensters

Uebung4.htmlhttps://technischeredaktion.com/webtech/HTML_CSS_JS_Folien/Folienbsp12_JS_Einfuehrung/u04/Uebung4.html

Uebung „Planetengetriebe Vorteile“

https://technischeredaktion.com/webtech/HTML_CSS_JS_Folien/Folienbsp12_JS_Einfuehrung/u04/Uebung4.html



Zeichensatz

• Unicode• Unterstützt fast alle geschriebenen Sprachen der Erde

Groß-und Kleinschreibung

• Case sensitive = unterscheidet zwischen Groß-und Kleinschreibung• ! HTML ist nicht case sensitive !



Leerzeichen

• zwischen den Befehlen werden ignoriert• in einer Zeichenkette werden berücksichtigt

Anweisungen

• Anweisungen werden in einer Zeile geschrieben und mit einem Semikolon (;) auseinander gehalten

a = 3; a = 3; b=4;b = 4;



Kommentare

• einzeilige Kommentare• mehrzeilige Kommentare

// einzeiliger Kommentar

/*mehrzeilige Kommentarewerden in dieser Form geschrieben

*/


Anweisungen

JavaScript besteht aus einer kontrollierten Anordnung von Anweisungen

Das sind Befehle, die der JavaScript-Interpreter des WWW-Browsersbewertet und in Maschinencode umsetzt, der auf dem Rechner des Anwenders ausführbar ist.

z.B.

zahl = 42;quadrat = zahl * zahl;

if(zahl > 1000) zahl = 0;alert("Das Quadrat von " + zahl + " = "+ quadrat);


Variablen definieren

• Variablen sind Speicherbereiche• Zwischenspeicherung von Daten• "Wert" = der Inhalt einer Variablen• Inhalt ist jederzeit änderbar• vor der Benutzung müssen Variablen zuerst definiert werden

z.B.

var Nummer = 42;var i, x;var satzteil = "Das Quadrat von ";


Zahlen

• JavaScript unterscheidet nicht zwischen Integer- und Gleitkommawerte

• Alle Zahlen werden als Gleitkommawerte dargestellt


Strings

• Folge von Unicode-Buchstaben, -Ziffern, -Interpunktionszeichen…

• zwischen einfachen oder doppelten Anführungszeichen ( ' oder " )

• einfache und doppelte Anführungszeichen können ineinander verschachtelt werden

var myString = 'Test';var myFormular = 'name="mein_Formular"';


Steuerzeichen bei Zeichenketten

<script type="text/javascript">

var variable1 = "Hier erfolgt ein\nZeilenumbruch"; //(alert-Fenster)var variable2 = "Menge\t23"; //(alert-Fenster)var variable3 = "Dann sagte er:\"Obstsalat! \"";var variable4 = 'Glaub\'s mir';var variable5 = '\u03c0 = 3,14...';

</script>

• Steuerzeichen dieser Art werden durch das Zeichen \ eingeleitet. Dahinter folgt ein Buchstabe, der das Steuerzeichen markiert.




Steuerzeichen

\t Tabulator

\n Zeilenumbruch

\" Doppeltes Anführungszeichen

\' Einfaches Anführungszeichen

\\ Backslash

\uXXXX Unicode-Zeichen


Strings zusammensetzen

Addition

var name1="Internet";

var name2="Anwendungen";

var fach = "Name des Faches: " + name1 + "-" + name2;


Variable

Variable Zeichenkette Variable Zeichen Variable

Operator Operator OperatorVariable

Zeichenkette

Zeichenkette


Strings - Zeichenketten

Länge des Strings

var name1 = "internet";var L = name1.length; //Eigenschaft• liefert 8 zurück

• das letzte Zeichenvar letztesZeichen = name1.charAt(name1.length-1); // Methode• liefert t zurück

• Substringvar teilstring = name1.substring(1,4); // Methode• Liefert nte zurück

• Position eines Buchstaben ermitteln

var low = name1.toLowerCase(); // internetvar up = name1.toUpperCase(); // INTERNET


Strings - Zeichenketten

Einen String in einem String finden

Die indexOf() Methode liefert die erste Position (als Nummer) der ersten gefundenen Zeichenkette innerhalbeiner Zeichenkette:

var str = "Das blaue Haus in der Hauptstraße.";var n = str.indexOf("blaue");alert(n);

Ausgegeben wird 4.

var str = "Das blaue Haus in der Hauptstraße.";if (str.indexOf("blaue") != -1) {document.write("blaue ist ein Teilstring von str");

}


Boolesche Werte

• nur zwei zulässige Werte: true oder false

• sind oft das Ergebnis eines Vergleichs. Ist 3 größer als 4?


Operatoren

Zuweisungsoperator weist einer Variable einen Wert zu

var Anton = 42;

• Vergleichsoperatoren

<script>

var Anton = 42;if (Anton == 42) alert(1); if (Anton != 42) alert(0); if (Anton > 42) alert(0); if (Anton < 42) alert(0); if (Anton >= 18) alert("SIE duerfen das hier sehen!"); if (Anton <= 17) alert("SIE duerfen das hier NICHT sehen!");

</script>


Operatoren

Zuweisungsoperator weist einer Variable einen Wert zu

Uebung43.html



Funktionen

• erweitern den Sprachraum der Sprache

• wird ein Mal definiert und kann in einem Programm beliebig oft ausgeführt werden

z.B. PrimzahlCheck(Zahl) {…}

• Schlüsselwort function + Leerzeichen + frei wählbarer Funktionsname + Funktions-Argumente (bei Bedarf in Klammer, Kommagetrennt)

• Funktionsrumpf steht zwischen 2 geschweiften Klammern

• in sich abgeschlossene Einheit

- Input = Parameter- Output = Rückgabe


Funktionen - Alternativer Funktionsaufruf! 1/2

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Funktionsaufruf</title><link href="g2.css" rel="stylesheet" type="text/css" /></head><body><p><img src="motor.jpg" width="240" height="210" /></p></body><script src="g2.js"></script></html>


Funktionen - Alternativer Funktionsaufruf! 2/2

// JavaScript Document

var b = 150;var h = 100;

document.images[0].onclick = function() {b = b + 150;h = h + 100;var Breite = b + "px";var Hoehe = h + "px";document.images[0].style.width = Breite;document.images[0].style.height = Hoehe;

}


Funktionen

• einfache Funktion

Math.sin((Math.PI/180)*30);

• Definition einer eigenen Funktion

function quadrat(x) {return x*x;}

• Funktionsaufruf

var wert1 = Math.sin((Math.PI/180)30);var wert2 = quadrat(30);




Bedingte Anweisungen

• Wenn-Dann-Bedingungen mit "if"

if( Eingabe != Passwort ) {alert( "Falsches Passwort!" );Geheim();

} else {document.location.href="geheim.htm";

}

• Vergleichsoperatoren von Variablen

A == B Trifft zu, wenn A=3 und B=3.A != B Trifft zu, wenn A=1 und B=3.A < B Trifft zu, wenn A=1 und B=3.A > B Trifft zu, wenn A=3 und B=2.A <= B Trifft zu, wenn A=3 und B=3 und A=2 und A=1… A >= B Trifft zu, wenn A=3 und B=3 und A=4 und A=5 ...




Logische Operatoren

• Logisches UND &&• Alle Bedingungen müssen erfüllt sein, damit die gesamte Bedingung erfüllt ist

if((x > 2) && (x < 10))

Uebung7.htmlhttps://technischeredaktion.com/webtech/HTML_CSS_JS_Folien/ Folienbsp12_JS_Einfuehrung/ u07/if_else_und_oder.html

https://technischeredaktion.com/webtech/HTML_CSS_JS_Folien/Folienbsp12_JS_Einfuehrung/u07/if_else_und_oder.html


Logische Operatoren

• Logisches ODER ||• Eine der Bedingungen muss erfüllt sein, damit die gesamte Bedingung erfüllt ist

if( (x > 2) || (x < 10) )

• Logisches NICHT !

if( !(x > 2) )


Bedingte Anweisungen

Fallunterscheidung mit "switch"

switch (monat_zahl) {

case 1: var monat_wort = " Januar "; break;case 2: var monat_wort = " Februar "; break;case 3: var monat_wort = " März "; break;case 4: var monat_wort = " April "; break;case 5: var monat_wort = " Mai "; break;case 6: var monat_wort = " Juni "; break;case 7: var monat_wort = " Juli "; break;case 8: var monat_wort = " August "; break;case 9: var monat_wort = " September "; break;case 10: var monat_wort = " Oktober"; break;case 11: var monat_wort = " November "; break;case 12: var monat_wort = " Dezember"; break; default: var monat_wort = "Unbekannter Monat";

}

Beispielhttps://technischeredaktion.com/webtech/HTML_CSS_JS_Folien/Folienbsp40/Folienbsp40_switch_JS.html

https://technischeredaktion.com/webtech/HTML_CSS_JS_Folien/Folienbsp40/Folienbsp40_switch_JS.html


Schleifen mit while

• Wertet zuerst den Ausdruck aus• Bei true wird die Schleife ausgeführt.• Sie wird so lange ausgeführt, bis der Ausdruck als false ausgewertet wird

var zaehler = 0;

while( zaehler < 10 ) {document.write("<p>" + zaehler + "<\/p>");zaehler++;

}


Schleifen mit do/while

• Auswertung des Ausdrucks geschieht immer am Ende der Schleife• Die Schleife wird mindestens ein Mal ausgeführt

var x = 10;

do {document.write("<p>x*x = "+(x*x)+"<\/p>");x = x + 1;

} while(x < 10);


Schleifen mit for

• Iteration über eine Menge• Ausführung der Schleife• Kompaktere Schreibweise als while

var Ausgabe = "";

for(var zaehler=0;zaehler<10;zaehler++) {document.write("<p>"+ zaehler +"</p>");

}

// Anstatt zaehler = zaehler + 1 kann auch zaehler++ geschrieben werden.// Anstatt zaehler = zaehler + 3 kann auch zaehler+=3 geschrieben werden.

Siehe auch JavaScript Assignment Operators bei w3Schools

http://www.w3schools.com/js/js_operators.asp


Kontrolle in Schleifen - break

• Beendet sofort eine Schleife

var i = 0;

while (i < 6) {if (i == 3) break;i++;

}

alert("i = " + i);


Kontrolle in Schleifen - continue

var i = 0, j = 0;

while (i < 6) {i++;if (i == 3) continue;j++;

}alert("i ist gleich " + i + " und j ist gleich " + j);


Gültigkeitsbereich von Variablen

• Der Gültigkeitsbereich einer Variable ist der Bereich eines Programms, in dem sie definiert ist.

• Globale Variablen haben einen globalen Gültigkeitsbereich.

• Lokale Variablen sind nur innerhalb einer Funktion oder eines Anweisungs-Blocks gültig.

<script>a = 'xyz'; // globale Variable

function machWas() {b = 'xyz'; // globale Variablevar a = 'abc'; // lokale Variable

}

machWas(); // a ist 'xyz' und b ist 'xyz' </script>


Objekte im HTML-Teil identifizieren

Die Methode getElementById() greift entsprechend der HTML-Variante des DOM (Document Object Model) auf ein HTML-Element zu, das ein id-Attribut besitzt.

Wert aus einem Textfeld mit der id Eingabefeld1: document.getElementById("Eingabefeld1").value

Die Methode getElementsByName() (HTML-Elementzugriff über name-Attribut) greift entsprechend der HTML-Variante des DOM auf ein HTML-Element zu, das ein name-Attribut besitzt. Sie liefert eine nummerierte Liste als Rückgabewert, über die der Zugriff auf die gefundenen Elemente ermöglicht wird.

Wert aus einem Textfeld mit dem name Eingabefeld: document.getElementsByName("Eingabefeld")[0].value

http://wiki.selfhtml.org/wiki/HTML/Universalattribute#id

http://wiki.selfhtml.org/wiki/Name

javascript, html5, css3technischeredaktion.com/webtech/html_css_js_folien/... ·...

Documents