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

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

Javascript

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

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)

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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.

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

JavaScript in HTML definieren

<script>…</script>

• in Head oder Body

• keine feste Vorschrift

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

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

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

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

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

Möglichkeit 2 JavaScript in HTML einzubinden

<!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>

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

Möglichkeit 3 JavaScript in HTML einzubinden

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);}

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

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>

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

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“

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

Lexikalische Struktur

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 !

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

Lexikalische Struktur

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;

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

Lexikalische Struktur

Kommentare

• einzeilige Kommentare• mehrzeilige Kommentare

// einzeiliger Kommentar

/*mehrzeilige Kommentarewerden in dieser Form geschrieben

*/

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

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);

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

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 ";

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

Zahlen

• JavaScript unterscheidet nicht zwischen Integer- und Gleitkommawerte

• Alle Zahlen werden als Gleitkommawerte dargestellt

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

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"';

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

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.

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

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

Steuerzeichen

\t Tabulator

\n Zeilenumbruch

\" Doppeltes Anführungszeichen

\' Einfaches Anführungszeichen

\\ Backslash

\uXXXX Unicode-Zeichen

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

Strings zusammensetzen

Addition

var name1="Internet";

var name2="Anwendungen";

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

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

Variable

Variable Zeichenkette Variable Zeichen Variable

Operator Operator OperatorVariable

Zeichenkette

Zeichenkette

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

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

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

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");

}

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

Boolesche Werte

• nur zwei zulässige Werte: true oder false

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

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

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>

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

Operatoren

Zuweisungsoperator weist einer Variable einen Wert zu

Uebung43.html

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

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

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

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>

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

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;

}

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

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);

Uebung5.htmlhttps://technischeredaktion.com/webtech/HTML_CSS_JS_Folien/Folienbsp12_JS_Einfuehrung/u05/Uebung5.html

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

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 ...

Uebung6.htmlhttps://technischeredaktion.com/webtech/HTML_CSS_JS_Folien/Folienbsp12_JS_Einfuehrung/u06/Uebung6.html

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

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

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

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) )

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

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

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

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++;

}

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

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);

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

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

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

Kontrolle in Schleifen - break

• Beendet sofort eine Schleife

var i = 0;

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

}

alert("i = " + i);

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

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);

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

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>

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

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