"Εθαξκνγέο Δηαδηθηύνπ"

Μέγεθος: px

Εμφάνιση ξεκινά από τη σελίδα:

Download ""Εθαξκνγέο Δηαδηθηύνπ""

Παρθενορή Ρόκας
7 χρόνια πριν
Προβολές:

1 "Εθαξκνγέο Δηαδηθηύνπ" Σελάξηα - Javascript - PHP Ισάλληλα 2008 Ι. Παπαδόπνπινο 1

είλαη κηθξά πξνγξάκκαηα επηηξέπνπλ ζηνλ επηζθέπηε κίαο ηζηνζειίδαο λα αιιειεπηδξάζεη κε απηή εθηεινύληαη ζηνλ ππνινγηζηή ηνπ επηζθέπηε () ν ρξήζηεο κπνξεί λα δεη ηνλ θώδηθά ηνπο ζπλήζσο είλαη

2 είλαη κηθξά πξνγξάκκαηα επηηξέπνπλ ζηνλ επηζθέπηε κίαο ηζηνζειίδαο λα αιιειεπηδξάζεη κε απηή εθηεινύληαη ζηνλ ππνινγηζηή ηνπ επηζθέπηε () ν ρξήζηεο κπνξεί λα δεη ηνλ θώδηθά ηνπο ζπλήζσο είλαη γξακκέλα ζε JavaScript ηνπ εμππεξεηεηή (server-side scripts) ν ρξήζηεο δελ βιέπεη ηνλ θώδηθά ηνπο, αιιά κόλν ηνλ παξαγόκελν από απηά θώδηθα HTML ζπλήζσο είλαη γξακκέλα ζε PHP Ισάλληλα 2008 Ι. Παπαδόπνπινο 2

3 πνύ εθηεινύληαη; ηνπηθά ζηνλ Η/Υ όπνπ ηξέρεη ν θπιινκεηξεηήο ηνπ ρξήζηε πνύ βξίζθνληαη; ελζσκαησκέλα ζην αξρείν HTML πνπ θνξηώλεηαη ζπλδεδεκέλα (linked) κε ην αξρείν HTML πνπ θνξηώλεηαη πώο ηξέρνπλ; ελεξγνπνηνύληαη κε βάζε γεγνλόηα (events) από ην πιεθηξνιόγην θαη ην πνληίθη πνηεο γιώζζεο ππνζηεξίδνπλ ; JavaScript AJAX (Asynchronous JavaScript and XML) Ισάλληλα 2008 Ι. Παπαδόπνπινο 3

4 JavaScript Tutorial: Η ζύληαμε ηεο JavaScript κνηάδεη ηδηαίηεξα κε απηή ηεο java θαη ηεο C/C++ Έλα απιό παξάδεηγκα: <html> <body> <script type="text/javascript"> document.write("this is my first JavaScript!"); alert("γεια..."); </script> </body> </html> Try it: Ισάλληλα 2008 Ι. Παπαδόπνπινο 4

5 εκθάληζε ελόο ξνινγηνύ <html> <head> <script type="text/javascript"> function starttime() { var today=new Date(); var h=checktime(today.gethours()); var m=checktime(today.getminutes()); var s=checktime(today.getseconds()); document.getelementbyid('myclock').innerhtml=h+":"+m+":"+s; t=settimeout('starttime()',500); } function checktime(i) { if (i<10) i = "0" + i; return i; } </script> </head> <body onload="starttime()"> <div id="myclock" style="border:dotted red 1px;text-align:center;font-size:24px; font-color:red;width:100px;background:#ccc;"></div> </body> </html> Ισάλληλα 2008 Ι. Παπαδόπνπινο 5

6 Γεγνλόηα ελεξγνπνίεζεο ζελαξίνπ Ισάλληλα 2008 Ι. Παπαδόπνπινο 6

Γεγνλόηα ελεξγνπνίεζεο ζελαξίνπ http://www.w3schools.

7 Γεγνλόηα ελεξγνπνίεζεο ζελαξίνπ Ισάλληλα 2008 Ι. Παπαδόπνπινο 7

8 Γεγνλόηα ελεξγνπνίεζεο ζελαξίνπ Ισάλληλα 2008 Ι. Παπαδόπνπινο 8

9 παξάδεηγκα: κία απιή αξηζκνκεραλή <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>αριθμομηχανή</title> <style> body { font-family:"verdana"; font-size:12px; font-weight:bold; } td { width:30px; height:30px; background-color:#ccc; text-align:center; border:dotted black 1px; } </style> <script type="text/javascript"> function NewEntry(x) { document.getelementbyid('result').innerhtml += x } </script> </head> ζπλέρεηα Ισάλληλα 2008 Ι. Παπαδόπνπινο 9

10 <body><table> <tr> <td colspan="4" id="result"></td> </tr> <tr> <td OnClick="NewEntry(7)">7</td> <td OnClick="NewEntry(8)">8</td> <td OnClick="NewEntry(9)">9</td> <td OnClick="NewEntry('+')">+</td> </tr> <tr> <td OnClick="NewEntry(4)">4</td> <td OnClick="NewEntry(5)">5</td> <td OnClick="NewEntry(6)">6</td> <td OnClick="NewEntry('-')">-</td> </tr> <tr> <td OnClick="NewEntry(1)">1</td> <td OnClick="NewEntry(2)">2</td> <td OnClick="NewEntry(3)">3</td> <td OnClick="NewEntry('*')">*</td> </tr> <tr> <td OnClick="document.getElementById('result').innerHTML = '('+document.getelementbyid('result').innerhtml+')*(-1)'">+/-</td> <td OnClick="NewEntry(0)">0</td> <td OnClick="NewEntry('.')">.</td> <td OnClick="NewEntry('/')">/</td> </tr> <tr> <td OnClick="document.getElementById('result').innerHTML = ''" colspan="2">c</td> <td OnClick="document.getElementById('result').innerHTML = eval(document.getelementbyid('result').innerhtml)" colspan="2">=</td> </tr> </table></body> Ισάλληλα 2008 Ι. Παπαδόπνπινο 10

Παξάδεηγκα ζειίδαο πνπ ρξεζηκνπνηεί AJAX αληηγξάςηε ηα παξαθάησ ζηνλ Try It editor: <p>χρηζιμοποιήζηε ηο πονηίκι για να περιηγηθείηε (click&drag)</p> <iframe width="425" height="350" frameborder="0"

11 Παξάδεηγκα ζειίδαο πνπ ρξεζηκνπνηεί AJAX αληηγξάςηε ηα παξαθάησ ζηνλ Try It editor: <p>χρηζιμοποιήζηε ηο πονηίκι για να περιηγηθείηε (click&drag)</p> <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"src=" f=q&source=s_q&hl=el&geocode=& sll= , &sspn= , & ie=utf8&ll= , &spn= , & t=h&z=17&output=embed"></iframe> Ισάλληλα 2008 Ι. Παπαδόπνπινο 11

12 server-side scripts πνύ εθηεινύληαη; ζηνλ Η/Υ όπνπ ηξέρεη ν εμππεξεηεηήο ηζηνύ (web server) πνύ βξίζθνληαη; ζην ζύζηεκα αξρείσλ ηνπ web server πώο ηξέρνπλ; εθηεινύληαη όηαλ έλαο ρξήζηεο δεηήζεη λα ηα θνξηώζεη, ελώ ην απνηέιεζκά ηνπο επηζηξέθεη ζηνλ αηηνύληα ζε κνξθή HTML απαηηείηαη λα θιεζνύλ κε ηελ κέζνδν http(s) θαη όρη κε ηε κέζνδν file πνηεο γιώζζεο ππνζηεξίδνπλ ; κέζσ ηνπ Common Gateway Interface (CGI), νπνηαδήπνηε γιώζζα πξνγξακκαηηζκνύ ε νπνία κπνξεί λα ηξέμεη ζηνλ εμππεξεηεηή ηζηνύ: shell scripts, perl, πξνγξάκκαηα C θ.ι.π. PHP: Hypertext Preprocessor Ισάλληλα 2008 Ι. Παπαδόπνπινο 12

server-side scripts PHP: Hypertext Preprocessor

εηδηθά θαηάιιειε γηα αλάπηπμε ηζηνζειίδσλ κπνξεί λα

com/php/default.asp παξαδείγκαηα PHP: http://www.techteam.

13 server-side scripts PHP: Hypertext Preprocessor αληηθεηκελνζηξαθήο γιώζζα ζελαξίσλ επξέσο ρξεζηκνπνηνύκελε εηδηθά θαηάιιειε γηα αλάπηπμε ηζηνζειίδσλ κπνξεί λα ελζσκαησζεί ζηελ HTML. PHP Tutorial: παξαδείγκαηα PHP: Ισάλληλα 2008 Ι. Παπαδόπνπινο 13

14 server-side scripts Παξάδεηγκα αξρείνπ PHP: (1/2) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <title>the title...</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <ul> <li><a href="m1/mathima_01.html">παράδειγμα με CSS</a></li> <li><a href="m1/mathima_01-nocss.html">παράδειγμα χωρίς CSS</a></li> <li><a href="m1/mathima_01.css">αρχείο CSS</a></li> </ul> Ισάλληλα 2008 Ι. Παπαδόπνπινο 14

15 server-side scripts Παξάδεηγκα αξρείνπ PHP: (2/2) <p> this is a test... </p> <?php print "<p>hello world! This comes from a PHP command!...</p> <p>"; $text=shell_exec("uname -a")."<br/>"; print $text; print "</p>"; $text=`date`; print "<p>".$text."</p>"; $text=shell_exec("ps xafu"); print "<XMP>".$text."</XMP>";?> </body> </html> Ισάλληλα 2008 Ι. Παπαδόπνπινο 15

16 server-side scripts Παξάδεηγκα αξρείνπ PHP: <table> <?php for ($i=0; $i<256; $i++) { print "<tr>"; for ($j=0; $j<16; $j++) { $c=dechex($i).dechex($j); if ($i<16) $c="0".$c; print "<td style=\"background-color:#".$c.";\">".$c."</td>"; } print "</tr>"; }?> </table> Ισάλληλα 2008 Ι. Παπαδόπνπινο 16

17 server-side scripts Παξάδεηγκα αξρείνπ PHP: <?php $list=`wget -O - \ \ 2>/dev/null grep ^CMSSW_ sort -t '_' -rn -k 2 -k 3 -k 4 \ while read f; do echo "<li>\$f</li>" done`; echo "<ul>".$list."</ul>";?> Ισάλληλα 2008 Ι. Παπαδόπνπινο 17

Σχετικά έγγραφα

Layouts. HTML - Advanced

Layouts. HTML - Advanced Layouts Τα layouts ζε κία ηζηνζειίδα είλαη πνιύ ζεκαληηθά ώζηε ε ζειίδα λα έρεη κία ωξαία εκθάληζε. Ο ζρεδηαζκόο ηωλ layouts πξέπεη λα γίλεηαη κε πνιύ πξνζνρή. Τα πεξηζζόηεξα websites ηνπνζεηνύλ ην πεξηερόκελό