Η παρουσίαση φορτώνεται. Παρακαλείστε να περιμένετε

Η παρουσίαση φορτώνεται. Παρακαλείστε να περιμένετε

Εισαγωγή στον Προγραμματισμό Διαδικτύου

Παρόμοιες παρουσιάσεις


Παρουσίαση με θέμα: "Εισαγωγή στον Προγραμματισμό Διαδικτύου"— Μεταγράφημα παρουσίασης:

1 Εισαγωγή στον Προγραμματισμό Διαδικτύου
Νίκος Παπαδάκης

2 Εισαγωγή στην html

3 Τι είναι η Html Η html είναι μια γλώσσα για να γράφουμε ιστοσελίδες. Όπως το word είναι ένας κειμενογράφος έτσι και το html είναι μια γλώσσα για να γράφουμε κείμενο για σελίδες του internet . Τα κείμενα που περιέχουν Html τελειώνουν σε .html, .htm Ο mozilla, google chrome,netscape, expoler κτλ διαβάζουν html αρχεία και τα εμφανίζουν στην μορφή που τα βλέπουμε. Ένα html αρχείο αποτελείται από δύο μέρη. Την αρχή και το κύριος αρχείο.

4 Βασικές εντολές Html <html> </html> αρχή και τέλος ενός html αρχείου <head> </head> αρχή και τέλος της πρώτου μέρους του Html αρχείου. Περιλαμβάνει πληροφορίες που αφορούν το κείμενο, αλλά δε εμφανίζονται σαν μέρος του κειμένου από το πρόγραμμα ανάγνωσης. Μια από αυτές τις πληροφορίες είναι η ετικέτα TITLE <title> </title> αρχή και τέλος του τίτλου <body> </body> αρχή και τέλος του κύριου μέρος του αρχείου Η ετικέτα <P> δηλώνει την αρχή μιας παραγράφου και μπορεί να βρίσκεται οπουδήποτε μέσα σε μια γραμμή ενός αρχείου HTML

5 Βασικές εντολές Html Η ετικέτα <Br> δηλώνει ένα τερματισμό γραμμής (line break). <HR WIDTH=75% SIZE=3 ALIGN=LEFT> Το μήκος (WIDTH) μπορεί να καθοριστεί με δυο τρόπους : ο ένας αναφέρεται σε ποσοστό επι τοις εκατό του μήκους της οθόνης και ο άλλος είναι σε εικονοστοιχεία (pixels). Έτσι, καθορίζοντας WIDTH=50% θα πάρουμε μια ευθεία γραμμή με μήκος ίσο με το μισό του παράθυρου, ενώ με WIDTH=200 θα πάρουμε μια ευθεία με μήκος ίσο με 200 εικονοστοιχεία. Το μέγεθος (SIZE) είναι το πάχος της γραμμής και ορίζεται σε εικονοστοιχεία και το προκαθορισμένο μήκος ποικίλει ανάλογα με το πρόγραμμα ανάγνωσης (μπορεί να είναι 2 ή 3 εικονοστοιχεία). Το κεντράρισμα (ALIGN) έχει τη σημασία της στοίχησης της ευθείας στο κέντρο (CENTER), δεξιά (RIGHT) ή αριστερά (LEFT).    

6 Επικεφαλίδες <H1> Heading level one </H1> <H2> Heading level two </H2> <H3> Heading level three </H3> <H4> Heading level four </H4> <H5> Heading level five </H5> <H6> Heading level six </H6>

7 Μέγεθος γραμμάτων <Font size=1> This is text at a size of 1. <Font size=2> This is text at a size of 2. <Font size=3> This is text at a size of 3. <Font size=4> This is text at a size of 4. <Font size=5> This is text at a size of 5. <Font size=6> This is text at a size of 6. <Font size=7> This is text at a size of 7.

8 ΣΥΝΔΕΣΜΟΣ – ΚΕΙΜΕΝΟ Πρόκειται για το βασικό σύνδεσμο υπερκειμένου. Δημιουργεί θερμό κείμενο στο οποίο κάνουν κλικ οι χρήστες για να μεταφερθούν σε άλλη διεύθυνση ή να ενεργοποιήσουν άλλες ενέργειες. Η HTML που πρέπει να συμπεριληφθεί είναι : <A HREF="whereto.htm"> text that triggers this link </A> Το whereto.htm είναι η URL στην οποία θα κατευθυνθεί ο χρήστης όταν κάνει κλίκ στο text that triggers this link

9 ΣΥΝΔΕΣΜΟΣ - ΕΙΚΟΝΙΔΙΟ Στην περίπτωση αυτή ο χρήστης δεν κάνει κλικ πάνω σε κείμενο, αλλά σε εικονίδιο : <A HREF="whereto.htm"> <IMG SRC="icon.gif" ALT="[icon]"> </A> Ο χρήστης θα κατευθυνθεί στην whereto.htm και η icon.gif είναι η URL στην οποία βρίσκεται αποθηκευμένο το εικονίδιο. Το ALT="[icon]" είναι ιδιαίτερα χρήσιμο για όσους έχουν - ακόμα - προγράμματα ανάγνωσης που υποστηρίζουν μόνο κείμενο. Γι' αυτούς θα εμφανιστεί μόνο η λέξη icon.

10 ΣΥΝΔΕΣΜΟΣ - ΕΙΚΟΝΙΔΙΟ ΚΑΙ ΚΕΙΜΕΝΟ
Εδώ ο χρήστης μπορεί να κάνει κλικ είτε πάνω στο εικονίδιο είτε στο κείμενο που το συνοδεύει : <A HREF="whereto.htm"> <IMG SRC="icon.gif" ALT="[icon]"> text label </A> Ισχύουν όσα είπαμε στο προηγούμενο συν του ότι ο χρήστης μπορεί να κάνει κλικ και στο κείμενο text label για να κατευθυνθεί στην whereto.htm. (Θα πρέπει να σημειώσουμε ότι όταν λέμε σύνδεσμο-κείμενο δεν εννοούμε κάποια μακροσκελή αναφορά. Πρόκειται απλά για μια δυο λέξεις που δίνουν στο χρήστη να καταλάβει περί τίνος πρόκειται και που, περίπου, θα κατευθυνθεί).

11 ΣΥΝΔΕΣΜΟΣ ΠΟΥ ΜΑΣ ΕΠΙΤΡΕΠΕΙ ΝΑ ΣΤΕΙΛΟΥΜΕ E-MAIL
<A send </A><BR>

12 ΜΗ-ΑΡΙΘΜΗΜΕΝΗ ΛΙΣΤΑ Αυτή η λίστα εμφανίζει τα στοιχεία της με βούλες (bullets). <UL> <LI>first item <LI>second item <LI>third item </UL>

13 ΑΡΙΘΜΗΜΕΝΗ ΛΙΣΤΑ Με τη λίστα αυτή δημιουργούμε κατευθείαν μια λίστα από αριθμημένα στοιχεία. <OL> <LI>first item <LI>second item <LI>third item <LI>fourth item </OL>

14 Μενού <P>Phrase or sentence introducing to the menu : </P> <UL> <LI><A HREF="option1.htm">first option</A> <LI><A HREF="option2.htm">second option</A> <LI><A HREF="option3.htm">third option</A> <LI><A HREF="option4.htm">fourth option</A> <LI><A HREF="option5.htm">fifth option</A> </UL>

15 Πίνακες Ο πίνακας αρχίζει και τελειώνει με <table> </table> <TR> Κάθε γραμμή του πίνακα εμφανίζεται ανάμεσα στις ετικέτες <TR> και </TR>. Το περιεχόμενο κάθε κελιού μιας γραμμής του πίνακα περικλύεται από τις ετικέτες <TD> και </TD>. Για παράδειγμα, η πρώτη σειρά του πίνακα περιλαμβάνει τα παρακάτω τρία κελιά : <TR> <!----- starts a row --> <TD>Content of Cell 1A</TD> <TD>Content of Cell 1B</TD> <TD>Content of Cell 1C</TD> </TR> <!----- ends a row --> Μπορεί να παρατηρήσει κανείς ότι οι ετικέτες <TD> και </TD> εμφανίζονται μόνο ανάμεσα στα <TR> και </TR>.

16 Φόρμες Η φόρμα αρχίζει και τελειώνει με <form> </form>
<input type="text" name="pedio1" maxlength="4"> σημαίνει ότι η φόρμα έχει ένα κουμπί το οποίο είναι text δηλαδή μπορούμε να γράψουμε κείμενο σε αυτό μέχρι 4 χαρακτήρων. Το όνομα αυτού του πεδίου είναι pedio1. <input type="submit" name="submitbutton1" value="Search"> σημαίνει ότι η φόρμα έχει ένα κουμπί το οποίο είναι τύπου submit και πάνω στο κουμπί φαίνεται το search. Το όνομα του είναι submitbutton1. Όταν κάνουμε κλικ πάνω στο κουμπί αυτό θα εκτελεστεί η ενέργεια που αναφέρεται στην φόρμα.

17 Φόρμες <form action=”test2_post.php” method=”post”>
Σημαίνει ότι όταν γίνει κλικ πάνω σε ένα κουμπί submit της φόρμας τότε θα εκτελεστεί το αρχείο test2_post.php.

18 <html> <head>
<title>example with forms </title></head> <body> <form action=”test2_post.php” method=”post”> <table border=”1” width=”50%” align=”center”> <tr> <td colspan="2" align="center"> Enter to search </td> </tr> <td> Salary: <input type="text" name="pedio1" maxlength="4"> <input type="submit" name="submitbutton1" value="Search"> </table> </form> </body></html> Enter to search Salary:

19 Πολλαπλές γραμμές κειμένου σαν είσοδος
Μία φόρμα η οποία απαιτεί από το χρήστη να εισάγει πολλαπλές γραμμές κειμένου χρησιμοποιεί το tag <TEXTAREA>. Επίσης χρησιμοποιείται το tag <INPUT TYPE="submit"> για να σηματοδοτήσει τη συμπλήρωση της φόρμας.

20 Πολλαπλές γραμμές κειμένου σαν είσοδος
<FORM ACTION="URL"> <TEXTAREA NAME="feedback" ROWS=5 COLS=20> My thoughts so far are: </TEXTAREA> <BR> <INPUT TYPE="submit" NAME="button" VALUE=Send </FORM>

21 Radio Button Μία φόρμα, η οποία απαιτεί από το χρήστη να διαλέξει ένα από μια σειρά από radio buttons, χρησιμοποιεί το <INPUT> tag με το attribute TYPE="radio

22 Radio Button FORM ACTION="URL"> <INPUT TYPE="radio" NAME="sex" VALUE="M"> Male<BR> <INPUT TYPE="radio" NAME="sex" VALUE="W"> Female<BR> <INPUT TYPE="submit" NAME="button" VALUE="Send"> </FORM>

23 Radio Button Χρησιμοποιώντας το attribute CHECKED σε κάποιο <INPUT> tag θέτουμε μια προυπάρχουσα επιλογή. Δίνεται το παρακάτω παράδειγμα: <FORM ACTION="URL"> <INPUT TYPE="radio" NAME="AGE" VALUE="a"><18<BR> <INPUT TYPE="radio" NAME="age" VALUE="b"         CHECKED>18-65<BR> <INPUT TYPE="radio" NAME="age" VALUE="c">65+<BR> <INPUT TYPE="submit" NAME="button" VALUE="Send"> </FORM>

24 Check boxes Μία φόρμα η οποία επιτρέπει στο χρήστη να να επιλέξει ένα ή και περισσότερα check boxes χρησιμοποιέι το <INPUT> tag με το attribute TYPE="checkbox".

25 Check boxes <FORM ACTION="URL"> Use<BR> <INPUT TYPE="checkbox" NAME="use"                VALUE="Ada 95" CHECKED>Ada 95<BR> <INPUT TYPE="checkbox" NAME="use"                VALUE="C++" CHECKED>C++<BR> <INPUT TYPE="checkbox" NAME="use"                VALUE="COBOL"<COBOL>COBOL<BR> <INPUT TYPE="submit" NAME="button"                VALUE="Send"> </FORM>

26  Pop up list Μία φόρμα για να επιτρέψει στο χρήστη να επιλέξει ένα αντικείμενο από μια pop up list χρησιμοποιεί το tag <SELECT>. FORM ACTION="URL">Media used is<BR> <SELECT NAME="Media">      <OPTION SELECTED> Disk      <OPTION> Floppy disk      <OPTION> DAT tape </SELECT> <BR> <INPUT TYPE="submit" NAME="button"                VALUE="Send"> </FORM>

27 Reset values Το <INPUT> tag με το attribute TYPE="reset" χρησιμοποιείται για να επαναφέρει τις τιμές μέσα σε μια φόρμα στην προκαθορισμένη τιμή. Για παράδειγμα, η ακόλουθη φόρμα μπορεί να επανέλθει στις αρχικές της τιμές με το που πιέζουμε το "reset".

28 RESET <FORM ACTION="URL"> I like to drink:<BR> <INPUT TYPE="checkbox" NAME="Like"                VALUE="Coffee" >Coffee<BR> <INPUT TYPE="checkbox" NAME="Like"                VALUE="Tea">Tea<BR> <INPUT TYPE="reset" VALUE="Reset"><BR> <INPUT TYPE="submit" NAME="button"                VALUE="Send"> </FORM>

29 Frames <html><frameset rows="50%,50%">
<frame src="page1.htm" name="frame1"> <frame src="page2.htm" name="frame2"> </frameset> </html> Αυτό θα παράγει δύο frames. Μπορείτε να δείτε ότι χρησιμοποιούνται οι ιδιότητες rows στην εντολή <frameset>. Αυτό συμαίνει ότι τα δύο frames είναι το ένα πάνω και το άλλο ακριβώς από κάτω. Το πάνω frame απεικονίζει την σελίδα page1.htm και το κάτω τη σελίδα page2.htm.

30 Frames <frameset cols="50%,50%"> <frameset rows="50%,50%"> <frame src="cell1.htm"> <frame src="cell2.htm"> </frameset> <frameset rows="33%,33%,33%"> <frame src="cell3.htm"> <frame src="cell4.htm"> <frame src="cell5.htm"> </frameset> </frameset>

31 JavaScript

32 Τι είναι η javascript; JavaScript ≠ Java δεν είναι java
Αναπτύχθηκε από την Netscape Σκοπός της είναι να δημιουργεί δυναμικές ιστοσελίδες Ευρεία χρήση

33 Πως δουλεύει μέσα σπό την HTML
<SCRIPT> … </SCRIPT> <!-- … // --> ;

34 Παράδειγμα <html> <head>
<title>JavaScript Page</title> <script LANGUAGE=“JavaScript”> <!-- actual JavaScript follows below document.write (“Welcome to the Test Site!”); // ending the script --> </script> </head> <body> Content of the Page </body> </html>

35 Τι θα κάνει το πρώτο παράδειγμα
Θα γράψει μέσα στην σελίδα το μήνυμα Welcome to the Test Site!;

36 Ιεραρχία JavaScript Το JavaScript οργανώνει όλα τα στοιχεία μιας web σελίδας σε μια ιεραρχία. Κάθε στοιχείο της σελίδας βλέπεται σαν αντικείμενο. Κάθε αντικείμενο έχει τις δικές του ιδιότητες (properties) και μεθόδους (methods). Με τη βοήθεια του JavaScript μπορείτε εύκολα να διαχειριστείτε τα αντικείμενα. Γι'αυτό είναι σημαντικό να καταλάβετε την ιεραρχία μιας HTML σελίδας. θα καταλάβετε εύκολα πως γίνεται αυτή η ιεραρχία με ένα παράδειγμα.

37

38

39 ΠΑΡΑΔΕΙΓΜΑ name= document.forms[0].elements[0].value;
Η πιο πάνω εντολή σημαίνει ότι το name θα πάρει την τιμή bla bla bla <form name="myForm"> Name: <input type="text" name="name" value=""><br> ... Αυτό σημαίνει ότι το forms[0] λέγεται επίσης myForm. Αντί για elements[0] μπορούμε να χρησιμοποιήσουμε το name (όπως προσδιορίζει η ιδιότητα ΝΑΜΕ="" στο <input>).

40 <title>JavaScript Page</title>
<html> <head> <title>JavaScript Page</title> <script LANGUAGE=“JavaScript”> <!-- actual JavaScript follows below alert (“Welcome to the Test Site!”); // ending the script --> </script> </head> <body> Content of the Page </body> </html> Be sure you can explain this sufficiently! 40

41 Στοιχεία της JavaScript
Variables Arrays Functions

42 Variables <script language=“JavaScript”>
<!-- definition of variables var num_car= 25; var passenger_per_car= 3; //calculation of total number of people var total_passenger= num_car * passenger_per_car alert(total_passenger); // end of script --> </script>

43 Arrays var score = new Array(3); score[0] = 35 score[1] = 56
Alternative : var score = new Array(35,56,10); sum=score[0]+score[1]+score[2]; alert(sum) ;

44 Πινάκες πολλών διαστάσεων
<script language="JavaScript"> <!-- var x = new Array(new Array(1,2,3),new Array('A','B','C'),new Array('x','y','z')); --> </script>

45 Πινάκες πολλών διαστάσεων
<script language="JavaScript"> <!-- function create2DArray(d1,d2){ var lineTxt="5"; var x = new Array(d1); for (var i=0;i<d1;i++){ x[i]=new Array(d2); } } </script> Δημιουργία 2-διάστατου πίνακα

46 Πινάκες 4-διαστάσεων <script language="JavaScript"> <!-- function create4DArray(d1,d2,d3,d4){ var x = new Array(d1); for (var i=0;i<d1;i++){ x[i]=new Array(d2); } for(var i=0;i<d1;i++){ for (var j=0;j<d2;j++){ x[i][j]=new Array(d3); } } for(var i=0;i<d1;i++){ for (var j=0;j<d2;j++){ for (var j=0;j<d3;j++){ x[i][j]=new Array(d4); } } } } </script>

47 Function <script langauge="JavaScript"> <!-- hide me
function announceTime( ) { //get the date, the hour, minutes, and seconds var the_date = new Date(); var the_hour = the_date.getHours(); var the_minute = the_date.getMinutes(); var the_second = the_date.getSeconds(); //put together the string and alert with it var the_time = the_hour + ":" + the_minute + ":" + the_second; alert("The time is now: " + the_time); } // show me --> </script> </head> <body> ... </body> </html>

48 Object(αντικείμενα) στην Javascript
Παράδειγμα var txt = "Hello"; Αυτή η εντολή δημιουργεί ένα JavaScript String object. Αυτό το String object έχει μια ιδιότητα η οποία ονομάζεται length. Για το συγκεκριμμένο string το length έχει τιμή 5. Επίσης έχει και κάποιες μεθόδους txt.indexOf(), txt.replace(), txt.search()

49 Παράδειγμα <html> <body> <script> var txt="hello"; var x=txt.length; var TXT=txt.toUpperCase(); document.write(txt+" "+" "+x+" "+TXT); </script> </body> </html> hello 5 HELLO

50 Αντικείμενα στην javascript
var person=new Object(); person.firstname="John"; person.lastname="Doe"; person.age=50; person.eyecolor="blue"; document.write(person.firstname + " is " + person.age + " years old.");

51 Παράδειγμα object(αντικείμενα)
<!DOCTYPE html> <html> <body> <script> var person=new Object(); person.firstname="John"; person.lastname="Doe"; person.age=50; person.eyecolor="blue"; document.write(person.firstname + " is " + person.age + " years old."); </script> </body></html> John is 50 years old.

52 Frame & Javascript <html><frameset rows="50%,50%">
<frame src="page1.htm" name="frame1"> <frame src="page2.htm" name="frame2"> </frameset> </html> Αυτό θα παράγει δύο frames. Μπορείτε να δείτε ότι χρησιμοποιούνται οι ιδιότητες rows στην εντολή <frameset>. Αυτό συμαίνει ότι τα δύο frames είναι το ένα πάνω και το άλλο ακριβώς από κάτω. Το πάνω frame απεικονίζει την σελίδα page1.htm και το κάτω τη σελίδα page2.htm.

53 Frame & javascript

54 Το parent window/frame αποκτά πρόσβαση στο child frame
frame2.document.write("Ένα μύνημα απ'το πατέρα παράθυρο."); function loadtwo() { parent.frame1.location.href= "first.htm"; parent.frame2.location.href= "second.htm";}

55 Το parent window/frame αποκτά πρόσβαση στο child frame
function loadtwo(url1, url2) { parent.frame1.location.href= url1; parent.frame2.location.href= url2;}

56 Το <Ι>child frame αποκτά πρόσβαση στο parent window/frame
parent.location.href= "

57 Το <Ι>child frame αποκτά πρόσβαση στο άλλο child frame
parent.frame2.document.write("Γειά, το frame1 επιφέρει αυτές τις αλλαγές.");

58 JavaScript in Action ROLLOVER BUTTONS
<script language="javascript" src="/js_scripts/rollover.js"></script> <script language = "JavaScript"> <!-- Hide from non-JavaScript Browsers if (document.images){ button1 = new Image() button1.src = "../assets/images/picture1.gif" button2 = new Image() button2.src = "../assets/images/picture2.gif" } // --> </script> I like this, showing how you can use basic functions of Javascript to help make a site or individual page easier to use will help with both the IA of a site as well as the design of individual Web pages. TRY FINDING A FEW MORE BASIC EXAMPLES OF USING JAVASCRIPT FOR BASIC FUNCTIONALITY LIKE THIS SLIDE. 58

59 JavaScript in Action INPUT-TEXT FIELD
function textRestore (input) { if ( input.value == "" ) { input.value = input.defaultValue; } <input type=text size="7" value="" onBlur="JavaScript:textRestore(this);" name=search style="background-color:#FFFFFF;font-family:Verdana, Arial; font-size:12; color:#113402; width:100px">

60 JavaScript in Action FORMS
function IsFormComplete(FormName) { var x = 0 var FormOk = true while ((x < document.forms[FormName].elements.length) && (FormOk)) { if (document.forms[FormName].elements[x].value == '') { alert('Please enter the '+document.forms[FormName].elements[x].name +' and try again.') document.forms[FormName].elements[x].focus() FormOk = false } x ++ } return FormOk }

61 JavaScript in Action PLUG-IN DETECTION
WM_easyDetect('flash'); WM_easyDetect('quicktime'); WM_easyDetect('shockwave'); WM_easyDetect('realaudio'); var hasFlash = WM_easyDetect('flash'); if(hasFlash) { window.location = 'flashversion.html'; } else { window.location = 'noflashversion.html'; }

62 JavaScript in Action FLIP-BOOK ANIMATION
// make the array of images bendyList = new Array('bendy000.gif', 'bendy001.gif', 'bendy002.gif', 'bendy003.gif', 'bendy004.gif', 'bendy005.gif', 'bendy006.gif', 'bendy007.gif', 'bendy008.gif', 'bendy009.gif', 'bendy010.gif', 'bendy011.gif', 'bendy012.gif', 'bendy013.gif', 'bendy014.gif'); // daPosition will point to successive images in the bendyList array daPosition = 0; function imageFlip() { // increment the pointer if(daPosition == bendyList.length-1) { daPosition = 0; } else { daPosition++; } // change the image document.images['daImg'].src = bendyList[daPosition]; // do it again setTimeout('imageFlip()', 200); }

63 JavaScript in Action SCROLL ---------------------------------
<!-- start scroller script --> <a id="scroller_anchor"></a> <script language="JavaScript1.2"> var scrollerwidth=405; var scrollerheight=76 var scrollerbgcolor='#eeeeee' ……….. slideimages='<a href=………………

64 Why Use JavaScript? Necessity http://www.cah.utexas.edu/ Amusement

65 Who’s got the time to Write JS?!
CHEAT!! STEAL!! HOW? Here’s the answer!

66 Resources http://www.webreference.com/js/tools/

67 Javascript & form Θα δούμε πως μπορούμε να ελέξουμε τι τιμή έχει πάρει ένα text box.

68 Javascript & form <HTML> <HEAD> <TITLE>Test Input</TITLE> <SCRIPT LANGUAGE="JavaScript"> function testResults (form) { var TestVar = form.inputbox.value; alert ("You typed: " + TestVar); } </SCRIPT> </HEAD> <BODY> <FORM NAME="myform" ACTION="" METHOD="GET">Enter something in the box: <BR> <INPUT TYPE="text" NAME="inputbox" VALUE=""><P> <INPUT TYPE="button" NAME="button" Value="Click" onClick="testResults(this.form)"> </FORM> </BODY> </HTML>

69 Επιπλέον Παραδείγματα
<script language="JavaScript"> <!-- hide function first() { // δημιουργεί ένα popup παράθυρο με το // κείμενο που έχει εισαχθεί στο πεδίο κειμένου alert("Η τιμή του πεδίου κειμένου είναι: " + document.myForm.myText.value); } function second() { // Αυτό το function κοιτάζει την κατάσταση του Check Box var myString= "The checkbox is "; // Είναι το CheckBox τικαρισμένο ή όχι? if (document.myForm.myCheckbox.checked) myString+= "τικαρισμένο" else myString+= "μη τικαρισμένο"; // output string alert(myString); } // -->

70 Javscript & form <HTML> <HEAD> <TITLE>Test Input</TITLE> <SCRIPT language="JavaScript"> function second(form) { if (form.myCheckbox.checked) alert("H timh epilex8hke"); else alert("den epilex8hke"); } </SCRIPT> </HEAD> <BODY> <FORM NAME="myform" ACTION="" METHOD="GET">Enter something in the box: <BR> <INPUT TYPE="radio" NAME="myCheckbox" VALUE=""><P> <INPUT TYPE="button" NAME="button" Value="Click" onClick="second(this.form)"> </FORM> </BODY> </HTML> Εδω βλέπουμε ένα παράδειγμα παρόμοιο με το προηγούμενο.

71 like starting a JavaScript when a user clicks on an HTML element.
New to HTML 4.0 was the ability to let HTML events trigger actions in the browser, like starting a JavaScript when a user clicks on an HTML element. Below is a list of the attributes that can be inserted into HTML tags to define event actions. IE: Internet Explorer, F: Firefox, O: Opera, W3C: W3C Standard. Attribute The event occurs when... IE F O W3C onblur An element loses focus 3 1 9 Yes onchange The content of a field changes onclick Mouse clicks an object ondblclick Mouse double-clicks an object 4 onerror An error occurs when loading a document or an image onfocus An element gets focus onkeydown A keyboard key is pressed No onkeypress A keyboard key is pressed or held down onkeyup A keyboard key is released onmousedown A mouse button is pressed onmousemove The mouse is moved onmouseout The mouse is moved off an element onmouseover The mouse is moved over an element onmouseup A mouse button is released onresize A window or frame is resized onselect Text is selected onunload The user exits the page

72 Mouse / Keyboard Attributes
Property Description IE F O W3C altKey Returns whether or not the "ALT" key was pressed when an event was triggered 6 1 9 Yes button Returns which mouse button was clicked when an event was triggered clientX Returns the horizontal coordinate of the mouse pointer when an event was triggered clientY Returns the vertical coordinate of the mouse pointer when an event was triggered ctrlKey Returns whether or not the "CTRL" key was pressed when an event was triggered metaKey Returns whether or not the "meta" key was pressed when an event was triggered relatedTarget Returns the element related to the element that triggered the event No screenX screenY shiftKey Returns whether or not the "SHIFT" key was pressed when an event was triggered

73


Κατέβασμα ppt "Εισαγωγή στον Προγραμματισμό Διαδικτύου"

Παρόμοιες παρουσιάσεις


Διαφημίσεις Google