Java Script Java Script script typetextjavascript var name

Μεταβλητές στην Java. Script Τύποι Δεδομένων: - Αριθμητικές, λογικές και αλφαριθμητικές τιμές <script type="text/javascript">

Παράδειγμα 2: Εκτέλεση πράξης + εμφάνιση μηνύματος <html> <body> <script type="text/javascript"> var a =

$Παράδειγμα: δομή if. . . else στο παιχνίδι “Μάντεψε τον αριθμό” function check_num(number) {$

$Συναρτήσεις (Functions) ΣΥΝΤΑΞΗ ΣΥΝΑΡΤΗΣΗΣ <script type="text/javascript"> function_name(parameter-list) { statements } </script> ΚΛΗΣΗ ΣΥΝΑΡΤΗΣΗΣ <body>$

Παράδειγμα 3: Συναρτήσεις <html> <head> <script type="text/javascript"> function say. Hello() { document. write ("Γεια

Παράδειγμα 4: event onmouseover <html> <head> <script type="text/javascript"> <!-function over() { alert ("ΜΠΡΑΒΟ ΤΑ

Παράδειγμα 5: onmouseover & onmouseout <html> <head> <title> onmouseover onmouseout</title> <script type="text/javascript"> function over()

$Άσκηση: swap img & swap text <script type="text/javascript"> function over_img() { document. get. Element.$

Παράδειγμα 6: get. Element. By. Id, inner. HTML <body> <button onclick="TESTinner. HTML()" > ΚΛΙΚ

Παράδειγμα 7: get. Element. By. Id, inner. HTML <html> <head> <title> ασκηση </title> <meta

Άσκηση: Δημοψήφισμα <html> <head> <title> ασκηση </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body>

$Μπορείς να πιάσεις την Τουίτυ; flag=1 function move_tweety() { if (flag==1) { tweety. style.$

Τεστ Γνώσεων function check() { var points = 0; T P I R SC

Μάντεψε τον αριθμό “prompt” “guess_box” <form name="guessquiz"> <input type="text" name="prompt" size="41" maxlenght="60" value="Μάντεψε έναν

Μάντεψε τον αριθμό <script> var guessme = Math. round(Math. random()*(99)+1); var speech = 'Μαντεψε

Slides: 23

Download presentation

Java. Script

Μεταβλητές στην Java. Script Τύποι Δεδομένων: - Αριθμητικές, λογικές και αλφαριθμητικές τιμές <script type="text/javascript"> var name = "Ali"; var money; Money = 2000. 50; var empty_pockets = FALSE; </script>

Παράδειγμα 2: Εκτέλεση πράξης + εμφάνιση μηνύματος <html> <body> <script type="text/javascript"> var a = 33; var b = 10; document. write("a + b = "); result = a + b; document. write(result); </script> </body> </html>

$Παράδειγμα: δομή if. . . else στο παιχνίδι “Μάντεψε τον αριθμό” function check_num(number) {$

Παράδειγμα: δομή if. . . else στο παιχνίδι “Μάντεψε τον αριθμό” function check_num(number) { var guess=document. forms. guessquiz. guess. value; var odhgies='Αριθμός είναι αυτό: "'+guess+ '"; '; document. forms. guessquiz. guess. value=''; if (guess==number) { document. forms. guessquiz. prompt. value='Συγχαρητήρια! Ο αριθμός '+number+' είναι σωστός!'; } if (number<guess) { odhgies='Μικρότερο από '+ guess; } if (number>guess) { odhgies='Μεγαλύτερο από '+ guess; } if (guess=='') { odhgies='Δεν μάντεψες κάποιον αριθμό! : (' } }

$Συναρτήσεις (Functions) ΣΥΝΤΑΞΗ ΣΥΝΑΡΤΗΣΗΣ <script type="text/javascript"> function_name(parameter-list) { statements } </script> ΚΛΗΣΗ ΣΥΝΑΡΤΗΣΗΣ <body>$

Συναρτήσεις (Functions) ΣΥΝΤΑΞΗ ΣΥΝΑΡΤΗΣΗΣ <script type="text/javascript"> function_name(parameter-list) { statements } </script> ΚΛΗΣΗ ΣΥΝΑΡΤΗΣΗΣ <body> <form> <input type="button" onclick="function_name(parameter-list)" value="Button 1"> </form> </body>

Παράδειγμα 3: Συναρτήσεις <html> <head> <script type="text/javascript"> function say. Hello() { document. write ("Γεια σου!"); } </script> </head> <body> <p>Πάτησε το κουμπί για να καλέσεις τη συνάρτηση</p> <form> <input type="button" onclick= "say. Hello()" value="Χαιρετισμός"> </form> </body> </html>

Παράδειγμα 4: event onmouseover <html> <head> <script type="text/javascript"> <!-function over() { alert ("ΜΠΡΑΒΟ ΤΑ ΚΑΤΑΦΕΡΕΣ!") document. write ("ΣΕ ΤΣΑΚΩΣΑ. . : )) "); } //--> </script> </head> <body> <div onmouseover="over()" > <h 2> ΣΥΡΕ ΤΟ ΠΟΝΤΙΚΙ ΕΔΩ </h 2> </div> </body> </html>

Παράδειγμα 5: onmouseover & onmouseout <html> <head> <title> onmouseover onmouseout</title> <script type="text/javascript"> function over() { document. get. Element. By. Id("TESTarea"). inner. HTML = "MOUSEOVER"; } function out() { document. get. Element. By. Id("TESTarea"). inner. HTML ="MOUSEOUT"; } </script> </head> <body> <div id=“TESTarea” onmouseover="over()" <h 2> ΣΥΡΕ ΤΟ ΠΟΝΤΙΚΙ ΕΔΩ </h 2> </div> onmouseout="out()"> <p onmouseover ="this. inner. HTML='MOUSEOVER!: )'" onmouseout="this. inner. HTML='MOUSEOUT: (" >Click me. </p> </body> </html>

$Άσκηση: swap img & swap text <script type="text/javascript"> function over_img() { document. get. Element.$

Άσκηση: swap img & swap text <script type="text/javascript"> function over_img() { document. get. Element. By. Id("picture"). src = "image 2. jpg"; } function out_img() {. . . } function over_txt() { document. get. Element. By. Id("text"). inner. HTML = "TEXT 2"; } function out_txt() {. . . } </script> </head> <body> <center> <H 1> SWAP IMAGE AND TEXT WITH JAVA SCRIPT! </h 1> <img id="picture" onmouseover="over_img()" onmouseout="out_img()" src="image 1. jpg"> <div id=". . . " onmouseover=". . . ()" <h 2> TEXT 1 </h 2> </div> </script> </html> onmouseout=". . . ()">

Παράδειγμα 6: get. Element. By. Id, inner. HTML <body> <button onclick="TESTinner. HTML()" > ΚΛΙΚ ΕΔΩ! </button> <p id="demo"> inner. HTML περιοχή παραγράφου </p> <button onclick="TESTwrite. Document()" > ΚΛΙΚ ΕΔΩ! </button> <script> function TESTinner. HTML() { document. get. Element. By. Id("demo"). inner. HTML="Hello World"; } function TESTwrite. Document() { document. write("Hello World"); } </script> </body>

Παράδειγμα 7: get. Element. By. Id, inner. HTML <html> <head> <title> ασκηση </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <button onclick="this. inner. HTML='Το πέτυχες!'"> BUTTON 1: this. inner. HTML </button> <button id="button 2" onclick="change_button_text()">BUTTON 2: change_button_text()</button> <script> function change_button_text() { document. get. Element. By. Id("button 2"). inner. HTML = "Το πέτυχες και με συνάρτηση!"; } </script> <button id="button 3" onclick="get. Element. By. Id('button 3'). inner. HTML='Το πέτυχες και με script χωρίς συνάρτηση!'">BUTTON 3: get. Element. By. Id('button 3'). inner. HTML </button> </body> </html>

Άσκηση: Δημοψήφισμα <html> <head> <title> ασκηση </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <h 1> Δημοψήφισμα </h 1> Επιθυμείτε να. . <button id="yes" onclick="clicked_yes()"> ΝΑΙ </button> <button id="no" onclick="clicked_no()"> ΟΧΙ </button> <script> function clicked_yes() { document. get. Element. By. Id("yes"). inner. HTML = "ΨΗΦΙΣΕΣ ΝΑΙ"; alert("Η ΨΗΦΟΣ ΣΟΥ ΚΑΤΑΧΩΡΗΘΗΚΕ"); } function clicked_no() { document. get. Element. By. Id("no"). inner. HTML = "ΨΗΦΙΣΕΣ ΟΧΙ"; alert("Η ΨΗΦΟΣ ΣΟΥ ΚΑΤΑΧΩΡΗΘΗΚΕ"); } </script> </body> </html>

$Μπορείς να πιάσεις την Τουίτυ; flag=1 function move_tweety() { if (flag==1) { tweety. style.$

Μπορείς να πιάσεις την Τουίτυ; flag=1 function move_tweety() { if (flag==1) { tweety. style. top=90 tweety. style. left=800 flag=2 } else if(flag==2) { tweety. style. top=90 tweety. style. left=50 flag=3 } else if(flag==3) { tweety. style. top=535 tweety. style. left=360 flag=1 } } IPT R SC <div ID="tweety" style="position: absolute; left: 360 px; top: 235 px; width: 210 px; height: 210 px; "> <img onmouseover="move_tweety()" src="tweet 8. gif" width="35" height="57"> </div> Y D O

Τεστ Γνώσεων function check() { var points = 0; T P I R SC if (document. forms. guessquiz. answer_box 1. value=="Παρίσι") { points = points + 10; } if (. . . ) {. . . } } alert('Πέτυχες ' +points+ 'πόντους'); <form name="guessquiz"> <p>Ποια είναι η πρωτεύουσα της Γαλλίας; <BR> M R FO <input type="text" name="answer_box 1" style="font-size: 12 pt; " size="20" maxlenght="20" value=""></p> <p>Ποια είναι η πρωτεύουσα της Ιταλίας; <BR> <input type="text". . . ></p> <input type="button" value="Έλεγχος" style="font-size: 18 pt; " on. Click='check()'> </form>

Μάντεψε τον αριθμό “prompt” “guess_box” <form name="guessquiz"> <input type="text" name="prompt" size="41" maxlenght="60" value="Μάντεψε έναν αριθμό από το 1 μέχρι το 100 "> <input type="text" name="guess_box" style="font-size: 12 pt; " size="3" maxlenght="3" value=""> <input type="button" value="Έλεγχος" style="font-size: 18 pt; " on. Click='process(guessme)'> </form>

Μάντεψε τον αριθμό <script> var guessme = Math. round(Math. random()*(99)+1); var speech = 'Μαντεψε τον αριθμό από το 1 μέχρι το 100'; function process(mystikos_ar) { var guess = document. forms. guessquiz. guess_box. value; document. forms. guessquiz. guess_box. value = ''; if (guess==mystikos_ar) { alert ('ΜΠΒΡΑΟ, μάντεψες σωστά! το '+mystikos_ar+' είναι σωστό! nn Κάνε κλικ για να ξαναπαίξεις'); speech=''; document. location=document. location; } if (mystikos_ar<guess) {speech='Μικρότερο από '+ guess; } if (mystikos_ar>guess) {. . . } if (guess=='') {. . . } document. forms. guessquiz. prompt. value=speech; document. forms. guessquiz. guess_box. focus(); }