PHP – JavaScript Kapitel 2 Wiederholung: Dynamische Seiten ... filePHP – JavaScript Kapitel 2...

23
1 PHP – JavaScript Kapitel 2 PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003 Wiederholung: Dynamische Seiten mit Datenbanken

Transcript of PHP – JavaScript Kapitel 2 Wiederholung: Dynamische Seiten ... filePHP – JavaScript Kapitel 2...

Page 1: PHP – JavaScript Kapitel 2 Wiederholung: Dynamische Seiten ... filePHP – JavaScript Kapitel 2 PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003 PHP –

1

PHP – JavaScript Kapitel 2

PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003

Wiederholung: Dynamische Seiten mit Datenbanken

Page 2: PHP – JavaScript Kapitel 2 Wiederholung: Dynamische Seiten ... filePHP – JavaScript Kapitel 2 PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003 PHP –

2

PHP – JavaScript Kapitel 2

PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003

PHP – JavaScript - Unterschiede

neinneinDatentypisierungneinjaDatenbank anbinden?

Eingabenüberprüfung

Animationen

Events

Text generieren

Steuerung (z.B. Frames)

Dynamische Webseiten

Verwendung*.html*.phpDateiendungjaneinErkennbar im QuelltextClient (bei M$ auch Server)ServerAusführungJavaScriptPHP

Page 3: PHP – JavaScript Kapitel 2 Wiederholung: Dynamische Seiten ... filePHP – JavaScript Kapitel 2 PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003 PHP –

3

PHP – JavaScript Kapitel 2

PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003

iframe Trick mit JavaScript im IE

<iframe src="file://C:/" width="400" height="400" name="sonstwas"><p>Ihr Festplatteninhalt auf C</p></iframe>

Harmlos, wird aber von einigen eingesetzt um User zu erschrecken

Page 4: PHP – JavaScript Kapitel 2 Wiederholung: Dynamische Seiten ... filePHP – JavaScript Kapitel 2 PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003 PHP –

4

PHP – JavaScript Kapitel 2

PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003

"Hello World" in HTML

<!-- Das Programm gibt "Hello World" im Browser aus Dateiname: helloWorld2.html //-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><html><head><title>Hello World</title>

</head><body>

<H2> Hello World </H2></body></html>

Page 5: PHP – JavaScript Kapitel 2 Wiederholung: Dynamische Seiten ... filePHP – JavaScript Kapitel 2 PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003 PHP –

5

PHP – JavaScript Kapitel 2

PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003

"Hello World" in PHP<!-- Das Programm gibt "Hello World" im Browser aus Dateiname: helloWorld.php //-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><html><head><title>Hello World</title>

</head><body><?php

echo "<h2> Hello World </h2>";?></body></html>

Page 6: PHP – JavaScript Kapitel 2 Wiederholung: Dynamische Seiten ... filePHP – JavaScript Kapitel 2 PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003 PHP –

6

PHP – JavaScript Kapitel 2

PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003

"Hello World" in JavaScript<!-- Das Programm gibt "Hello World" im Browser ausDateiname: helloWorld.html //-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><html><head><title>Hello World</title>

</head><body>

<script language = "JavaScript">document.write ("<H2> Hello World </H2>");

</script></body></html>

JavaScript Funktion / Methode

Page 7: PHP – JavaScript Kapitel 2 Wiederholung: Dynamische Seiten ... filePHP – JavaScript Kapitel 2 PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003 PHP –

7

PHP – JavaScript Kapitel 2

PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003

"Hello World" im VergleichJavaScript<script language = "JavaScript">

document.write ("<H2> Hello World </H2>");</script>

PHP<?php

echo "<h2> Hello World </h2>";?>

HTML<H2> Hello World </H2>

Page 8: PHP – JavaScript Kapitel 2 Wiederholung: Dynamische Seiten ... filePHP – JavaScript Kapitel 2 PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003 PHP –

8

PHP – JavaScript Kapitel 2

PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003

Vergleich des Source-Codes der beiden Seiten

JavaScript-Code erkennbar

Kein PHP-Code erkennbar

Page 9: PHP – JavaScript Kapitel 2 Wiederholung: Dynamische Seiten ... filePHP – JavaScript Kapitel 2 PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003 PHP –

9

PHP – JavaScript Kapitel 2

PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003

Einfache Addition mit HMTL<!-- Das Programm addiert die Zahlen 9 und 10Dateiname: addition1.html //-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><html><head><title>Superleichte Addition</title>

</head><body>

<p>Die Summe von 9 und 10 ist: 19

</p></body></html>

Page 10: PHP – JavaScript Kapitel 2 Wiederholung: Dynamische Seiten ... filePHP – JavaScript Kapitel 2 PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003 PHP –

10

PHP – JavaScript Kapitel 2

PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003

Einfache Addition mit PHP<!-- Das Programm addiert die Zahlen 9 und 10 Dateiname: addition1.php //--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><html><head><title>Superleichte Addition</title>

</head><body><?php

$ersterSummand=9;$zweiterSummand=10;$summe=$ersterSummand+$zweiterSummand;echo "Die Summe von $ersterSummand und $zweiterSummand" .

" ist: $summe";?></body></html>

Variable

Operator

Variablen und Text in Anführungszeichen mischbar

Page 11: PHP – JavaScript Kapitel 2 Wiederholung: Dynamische Seiten ... filePHP – JavaScript Kapitel 2 PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003 PHP –

11

PHP – JavaScript Kapitel 2

PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003

Einfache Addition mit JavaScript<!-- Das Programm addiert die zahlen 9 und 10Dateiname: addition1.html //-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><html><head><title>Addition zum Ersten</title></head><body>

<script language = "JavaScript">var ersterSummand;var zweiterSummand;ersterSummand=9;zweiterSummand=10;summe=ersterSummand+zweiterSummand;document.write ("Die Summe von " + ersterSummand +

" und " + zweiterSummand +" ist: " + summe);

</script></body></html>

VariablenDeklaration

Operator

Variablen und Text NICHT mischbar

Page 12: PHP – JavaScript Kapitel 2 Wiederholung: Dynamische Seiten ... filePHP – JavaScript Kapitel 2 PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003 PHP –

12

PHP – JavaScript Kapitel 2

PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003

Source-Code "Analyse" ☺

Kein PHP-Code erkennbar,ausgeliefert wird nur HTML

JavaScript-Code erkennbar

Page 13: PHP – JavaScript Kapitel 2 Wiederholung: Dynamische Seiten ... filePHP – JavaScript Kapitel 2 PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003 PHP –

13

PHP – JavaScript Kapitel 2

PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003

JavaScript Addition mit Eingabe<!-- Das Programm addiert zwei einzugebende Zahlen

Dateiname: addition2.html //--><title>Addition mit Eingabe </title></head><body>

<script language = "JavaScript">var ersterSummand;var zweiterSummand;ersterSummand=prompt("Bitte den ersten Summanden ein!","");zweiterSummand=prompt("Bitte den zweiten Summanden ein!","");ersterSummand=parseFloat(ersterSummand);zweiterSummand=parseFloat(zweiterSummand);summe=ersterSummand+zweiterSummand;document.write ("Die Summe von " + ersterSummand +

" und " + zweiterSummand +" ist: " + summe);

</script></body></html>

Vorgabewertfür Eingabefeld

Variablendeklaration

Umwandlung String / Zahl

Erst rechtsdann links

Page 14: PHP – JavaScript Kapitel 2 Wiederholung: Dynamische Seiten ... filePHP – JavaScript Kapitel 2 PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003 PHP –

14

PHP – JavaScript Kapitel 2

PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003

Screenshots der JavaScript-Aufgabe

Textteil

EingabepromptEingabeprompt

Page 15: PHP – JavaScript Kapitel 2 Wiederholung: Dynamische Seiten ... filePHP – JavaScript Kapitel 2 PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003 PHP –

15

PHP – JavaScript Kapitel 2

PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003

PHP Addition mit Formulareingaben<!-- Das Programm addiert die Zahlen 9 und 10 Dateiname: addition2php.html //--><h2>Addition zweier Zahlen</h2><form name="addition" action="./addition2php.php" method="POST">

<table border><tr>

<td>Erster Summand</td><td><input type="text" name="ersterSummand" size=12></td>

</tr><tr>

<td>Zweiter Summand</td><td><input type="text" name="zweiterSummand" size=12></td>

</tr><tr>

<td colspan="2" align="center"><input type="submit" name="Button1" value="Abschicken">

</td></tr>

</table></form></body></html>

Page 16: PHP – JavaScript Kapitel 2 Wiederholung: Dynamische Seiten ... filePHP – JavaScript Kapitel 2 PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003 PHP –

16

PHP – JavaScript Kapitel 2

PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003

Die Auswertungsseite<!-- Das Programm addiert die Zahlen 9 und 10 Dateiname: addition2php.php //--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><html><head><title>Addition mit Eingabe in php (Teil 2)</title></head><body><h2>Addition zweier Zahlen: Das Ergebnis</h2><?php

$summe=$ersterSummand+$zweiterSummand;echo "Die Summe von $ersterSummand und $zweiterSummand ist:<br>

$summe";?></body></html>

Page 17: PHP – JavaScript Kapitel 2 Wiederholung: Dynamische Seiten ... filePHP – JavaScript Kapitel 2 PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003 PHP –

17

PHP – JavaScript Kapitel 2

PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003

Eingabeformular / Ausgabeseite

Page 18: PHP – JavaScript Kapitel 2 Wiederholung: Dynamische Seiten ... filePHP – JavaScript Kapitel 2 PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003 PHP –

18

PHP – JavaScript Kapitel 2

PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003

JavaScript Addition mit Eingabe von Höchstwert<!-- Das Programm addiert natuerliche Zahlen

bis zu einer eingegebenen ZahlDateiname: addition3.html //-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><html><head><title>Addition mit Eingabe</title></head><body>

<script language = "JavaScript">var bisZu;var summe;bisZu=prompt("Bitte geben Sie Zahl, bis zu der summiert wird, ein","");bisZu=parseInt(bisZu);summe=0;for(i=1;i<=bisZu;i++){

summe=summe+i;}document.write ("Die Summe der ersten " + bisZu +

" nat&uuml;rlichen Zahlen " +" ist: " + summe);

</script></body></html>

Page 19: PHP – JavaScript Kapitel 2 Wiederholung: Dynamische Seiten ... filePHP – JavaScript Kapitel 2 PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003 PHP –

19

PHP – JavaScript Kapitel 2

PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003

Die Schleife und ihre Wertefor(i=1;i<=bisZu;i++){

summe=summe+i;}

1044

633

322

111

Wert von summeWert von iSchleifendurchlauf

Page 20: PHP – JavaScript Kapitel 2 Wiederholung: Dynamische Seiten ... filePHP – JavaScript Kapitel 2 PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003 PHP –

20

PHP – JavaScript Kapitel 2

PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003

JavaScript Addition Screenshots

Page 21: PHP – JavaScript Kapitel 2 Wiederholung: Dynamische Seiten ... filePHP – JavaScript Kapitel 2 PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003 PHP –

21

PHP – JavaScript Kapitel 2

PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003

PHP Addition mit Eingabe von HöchstwertKOPFDATEN WIE GEHABT Dateiname addition3.php<title>Aufsummierung aller natürlichen Zahlen bis zu einer einzugebender Zahl in php</title><schnipp schnapp><body><h2>Aufsummierung aller natürlichen Zahlen bis zu einer einzugebender Zahl</h2><form name="addition3" action="./addition3php.php" method="POST">

<table border><tr>

<td>Zahl, bis zu der summiert werden soll</td><td><input type="text" name="bisZu" size=12></td>

</tr><tr>

<td colspan="2" align="center"><input type="submit" name="Button1" value="Abschicken">

</td></tr>

</table></form></body></html>

Page 22: PHP – JavaScript Kapitel 2 Wiederholung: Dynamische Seiten ... filePHP – JavaScript Kapitel 2 PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003 PHP –

22

PHP – JavaScript Kapitel 2

PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003

"Auswertung" der Eingaben<!-- Das Programm addiert die Zahlen 9 und 10Dateiname: addition2php.php //-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><html><head><title>Addition mit Eingabe in php (Teil 2)</title></head><body><h2>Aufsummierung nat&uuml;rlicher Zahlen: Das Ergebnis</h2><?php

$summe=0;for($i=1;$i<=$bisZu;$i++){

$summe=$summe+$i;}echo "Die Summe der ersten $bisZu " .

" nat&uuml;rlichen Zahlen " ." ist: $summe";

?></body></html>

Page 23: PHP – JavaScript Kapitel 2 Wiederholung: Dynamische Seiten ... filePHP – JavaScript Kapitel 2 PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003 PHP –

23

PHP – JavaScript Kapitel 2

PHP / JavaScript Bernd Blümel & Christian Metzger - Version: 07 April 2003

Eingabe / Resultat