Επικοινωνία Ανθρώπου Μηχανής CGI HTML JAVASCRIPT

Transcript Επικοινωνία Ανθρώπου Μηχανής CGI HTML JAVASCRIPT

Επικοινωνία Ανθρώπου
Μηχανής
HTML CGI JAVASCRIPT
Κουμπούλης Χρήστος Α.Μ. 921
Χαλαβαζής Βασίλης Α.Μ. 988
ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML
H HTML αποτελείται από απλά αρχεία τα
οποία περιέχουν εντολές και κείμενο μαζί.
 Οι εντολές απευθύνονται στον BROWSER
και καθορίζουν τον τρόπο εμφάνισης του
κειμένου της σελίδας καθώς και όλη την
σελίδα γενικά.
 Για να τα δημιουργήσεις μπορείς να
χρησιμοποιήσεις οποιονδήποτε συντάκτη
κειμένου.

ΕΤΙΚΕΤΕΣ ΣΤΗΝ HTML
Είναι σημάδια που χρησιμοποιεί η HTML
για να καθορίσει την μορφοποίηση του
ενδιάμεσου κειμένου μιας σελίδας.
Παράδειγμα
 Η ετικέτα <H1> καθορίζει ότι το κείμενο
που ακολουθεί θα εμφανιστεί ως
επικεφαλίδα πρώτου μεγέθους.
 Η παραπάνω ετικέτα τελειώνει με το
σύμβολο </H1>.

ΣΧΟΛΙΑ ΣΤΗΝ HTML
Σχόλιο θεωρείται οτιδήποτε βρίσκετε
ανάμεσα στο συγκεκριμένο σύμβολο <!-και κλείνουν με --> .
 Τα σχόλια δεν εμφανίζονται στην σελίδα
παρά μόνο στον κώδικα για την βοήθεια
όσων θέλουν να τον διαβάσουν και να τον
μετατρέψουν.

ΣΥΝΤΑΞΗ ΤΗΣ HTML
Παράδειγμα
<HTML>
<HEAD>
<TITLE> TEST</TITLE>
<!– Αυτός ο τίτλος εμφανίζετε στην πάνω μεριά του παραθύρου της
σελίδας που έχεις φτιάξει-->
</HEAD>
<BODY>

</SCRIPT>
Παράδειγμα
Το μήνυμά μας εμφανίζεται στο πρόγραμμα περιήγησης
H σύνταξη της JavaScript













Ο κώδικας JavaScript είναι εσώκλειστος σε ειδικά tags (ετικέτες)
αρχής και τέλους.Η ετικέτα <SCRIPT> δηλώνει ότι ξεκινά κώδικας
JavaScript και η ετικέτα </SCRIPT> το τέλος του. Παρακάτω
παρατίθεται ο κώδικας του προηγούμενου παραδείγματος :
<HTML>
<HEAD>
<TITLE> Το πρώτο μου πρόγραμμα σε JavaScript </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-document.write ("Καλημέρα JavaScript !!!");
//-->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
H σύνταξη της JavaScript
Οι τύποι των μεταβλητών και οι δηλώσεις τους είναι παρόμοια
με άλλες γλώσσες προγραμματισμού όπως η C , C++.
 Η JavaScript είναι γλώσσα που κάνει διάκριση πεζώνκεφαλαίων (case sensitive).
 Μια μεταβλητή ορίζεται με την χρήση της δεσμευμένης λέξης
var όπως παρακάτω:
var όνομα_μεταβλητής ;
Παραδείγματα έγκυρων μεταβλητών
 MyName
 this_year
 x1
Παραδείγματα μή έγκυρων μεταβλητών
 1x
 ΑΙΘΟΥΣΑ
 My name

Πίνακες στην JavaScript










Ο πίνακας στην JavaScript είναι ένα αντικείμενο Array και αφού
δημιουργηθεί καταλαμβάνει κάποιες θέσεις στη μνήμη του
υπολογιστή.
Για να δημιουργηθούν οι θέσεις αυτές στη μνήμη χρησιμοποιούμε
τον τελεστή new όταν δημιουργούμε τον πίνακα.
Για παράδειγμα η δήλωση :
var day=new Array(7);
δημιουργεί έναν πίνακα εφτά θέσεων στη μνήμη
Day[0]=“Κυριακή”;
Day[1]=“Δευτέρα”;
Day[2]=“Τρίτη”;
Day[3]=“Τετάρτη”;
Day[4]=“Πέμπτη”;
Day[5]=“Παρασκευή”;
Day[6]=“Σάββατο”;
Κλάσεις


Η JavaScript υποστηρίζει αντικειμενοστρεφή
προγραμματισμό χωρίς να φτάνει όμως στο επίπεδο των
γλωσσών Java ή C++.
Οι πλήρως αντικειμενοστρεφείς γλώσσες όπως η C++
και η Java ,εκτός από μια πληθώρα έτοιμων κλάσεων
που διαθέτουν επιτρέπουν στον προγραμματιστή να
φτιάξει και τις δικές του κλάσεις με την χρήση της
δεσμευμένης λέξης class. Η JavaScript (με εξαίρεση την
JScript.NET) δεν διαθέτει τέτοια δεσμευμένη λέξη αλλά
επιτρέπει στον προγραμματιστή αφ΄ ενός μεν να
δουλεύει με αντικείμενα και αφ΄ ετέρου να δημιουργεί νέα
με την βοήθεια συναρτήσεων.
Μέθοδοι



Το αντικείμενο window της JavaScript διαθέτει τις μεθόδους alert ()
και prompt ().
Η μέθοδος alert () χρησιμοποιείται για να παρουσιάσει στο χρήστη
ένα μήνυμα μέσω ενός πλαισίου προειδοποίησης. Το πλαίσιο
προειδοποίησης είναι ένα πλαίσιο που εμφανίζει ένα μήνυμα και
κάτω από αυτό υπάρχει το κουμπί ΟΚ. Μόλις ο χρήστης πατήσει το
κουμπί ΟΚ με το ποντίκι στο πλαίσιο διαλόγου αυτό εξαφανίζεται.
Η μέθοδος prompt () καλεί το χρήστη να δώσει μέσω ενός πλαισίου
διαλόγου τα δικά του δεδομένα γράφοντάς τα με το πληκτρολόγιο. Η
μέθοδος prompt () μπορεί να δεχθεί δύο ορίσματα: Το πρώτο
εμφανίζεται επάνω στο πλαίσιο και καθοδηγεί το χρήστη σχετικά με
τα δεδομένα που πρέπει να δώσει. Το δεύτερο χρησιμοποιείται ως
αρχικό μήνυμα στο χώρο όπου πρόκειται να καταχωρίσει τα
δεδομένα του ο χρήστης. Το πλαίσιο διαλόγου διαθέτει επίσης δύο
κουμπιά ,το ΟΚ και το Άκυρο ,όπως το πλαίσιο επιβεβαίωσης.
H εντολή if
H δομή της είναι η εξής :
if (condition)
{
Then statement
}
else
{
Else statement
}

Παράδειγμα


















<HTML>
<HEAD>
<TITLE> Παράδειγμα if...else </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-var mark, mark1;
mark=window.prompt("Δώσε το βαθμό","");
mark1=parseFloat(mark);
if (mark1>=5)
window.alert("Συγχαρητήρια !!!\n Επέτυχες!!!");
else
window.alert("Δεν πέτυχες...\n Καλή δύναμη για την \n επόμενη προσπάθεια!");
//-->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Συνέχεια...
Κατά την εκτέλεση πληκτρολογούμε τυχαία το 8 ως βαθμό
Συνέχεια...
Αφού ο βαθμός είναι μεγαλύτερος του 5 εμφανίζεται το μήνυμα :
Συνέχεια...
Ενώ αν ο βαθμός ήταν μικρότερος του 5 θα εμφανιζόταν το μήνυμα :
H εντολή while



















<HTML>
<HEAD>
<TITLE> Πρότυπο HTML </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-var response;
response=window.prompt("Δώστε το συνθηματικό","");
while (response!=“iq1234”)
{
window.alert(“Κάνατε λάθος!");
response=window.prompt("Δώστε το συνθηματικό","");
}
window.alert(“Περνάτε στην επόμενη φάση");
//-->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
H εντολή for























<HTML>
<HEAD>
<TITLE> ΕΝΤΟΛΗ ΕΠΑΝΑΛΗΨΗΣ for </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-var response,num,x,y;
response=window.prompt("Δώστε έναν αριθμό","");
num=parseInt(response);
document.write(“<PRE>”);
document.write(“Αριθμοί” +”\t”+”\t”+”Τετράγωνα”+”<BR>”);
for (x=0;x<=num;x+=2)
{
y=x*x;
document.write(x+”\t”+”\t”+y);
document.write(“<BR>”);
}
document.write(“<PRE>”);
//-->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
TΕΛΟΣ ΔΙΑΦΑΝΕΙΩΝ

Επικοινωνία Ανθρώπου Μηχανής CGI HTML JAVASCRIPT

Transcript Επικοινωνία Ανθρώπου Μηχανής CGI HTML JAVASCRIPT

Directory