Τρίτη 14 Απριλίου 2020

ΕΥΡΕΤΗΡΙΟ

στις Δεν υπάρχουν σχόλια:

Javascript - Μάθημα #5

Εισαγωγή στην Javascript - Μάθημα #5

  Γραφικά SVG σε HTML με JS


Τα Scalable Vector Graphics (SVG) είναι μια μορφή διανυσματικής εικόνας για δισδιάστατα γραφικά με υποστήριξη για διαδραστικότητα και κινούμενα σχέδια.

Η παραπάνω εικόνα απεικονίζει τη διαφορά μεταξύ bitmap και διανυσματικών εικόνων. Η εικόνα bitmap αποτελείται από ένα σταθερό σύνολο pixel, ενώ η διανυσματική εικόνα αποτελείται από ένα σταθερό σύνολο σχημάτων. Στην εικόνα, η κλιμάκωση του bitmap αποκαλύπτει τα pixel ενώ η κλιμάκωση της διανυσματικής εικόνας διατηρεί τα σχήματα.

Τα σχέδια SVG μπορούν να ενσωματωθούν σε μια HTML ιστοσελίδα, μπορεί να είναι δυναμικά και διαδραστικά και μπορούν να προγραμματιστούν σε JavaScript.

ΠΑΡΑΔΕΙΓΜΑ #5.1:
<!DOCTYPE html>
<html>
<body>

<p>Σχεδίαση κύκλων με SVG:</p>

<svg height="200" width="200">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  <circle cx="110" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />

 <circle cx="50" cy="150" r="40" 
  style="fill:blue;stroke:black;stroke-width:5;opacity:0.5" />
 <circle cx="110" cy="150" r="40" 
  style="fill:yellow;stroke:black;stroke-width:5;opacity:0.5" />

  Ο φυλλομετρητής σου δεν υποστηρίζει ενσωμάτωση εικόνων SVG.
</svg>

</body>
</html>



Εισάγετε τις εντολές HTML στο γαλάζιο πλαίσιο.
Η ιστοσελίδα που αντιστοιχεί στις εντολές φαίνεται στο λευκό πλαίσιο πιο κάτω:
(Αρχικά δοκιμάστε να μεταφέρετε όλες τις εντολές με ΑΝΤΙΓΡΑΦΗ-ΕΠΙΚΟΛΛΗΣΗ.
Στην συνέχεια μπορείτε να κάνετε αλλαγές και να δοκιμάσετε να αλλάξετε όπως θέλετε
την λειτουργικότητα του κάθε παραδείγματος.)


Προσομοίωση φωτεινού σηματοδότη με SVG και JavaScript.

ΠΑΡΑΔΕΙΓΜΑ #5.2:
<!DOCTYPE html>
<html>
<body>

<p>Σχεδίαση φωτεινού σηματοδότη με SVG. 
<br> Πατώντας τα κουμπιά ανάβει το κάθε χρώμα:</p>

<svg height="280" width="140" style="display:block; margin-left:auto; margin-right:auto; width: 30%;">

  <rect width="130" height="260" style="fill:black;stroke:black;stroke-width:5" />

 <circle id="c1" cx="65" cy="50" r="40"  style="fill:red;stroke:black;stroke-width:5;opacity:0.2" />

 <circle id="c2" cx="65" cy="130" r="40"  style="fill:yellow;stroke:black;stroke-width:5;opacity:0.2"/>

 <circle id="c3" cx="65" cy="210" r="40"  style="fill:lime;stroke:black;stroke-width:5;opacity:0.2" />
 
  Ο φυλλομετρητής σου δεν υποστηρίζει ενσωμάτωση εικόνων SVG.
</svg>


<div style=" margin: auto;   width: 40%;">
<button onclick="
document.getElementById('c1').style.opacity='1';
document.getElementById('c2').style.opacity='0.2';
document.getElementById('c3').style.opacity='0.2';
">
κόκκινο
</button>
<button onclick="
document.getElementById('c1').style.opacity='0.2';
document.getElementById('c2').style.opacity='1';
document.getElementById('c3').style.opacity='0.2';
">
κίτρινο
</button>
</button>
<button onclick="
document.getElementById('c1').style.opacity='0.2';
document.getElementById('c2').style.opacity='0.2';
document.getElementById('c3').style.opacity='1';
">
πράσινο
</button>
</div>


</body>
</html>


ΠΑΡΑΔΕΙΓΜΑ #5.3:
<!DOCTYPE html>
<html>
<body>

<p>Σχεδίασε ένα αστέρι με SVG:</p>


<svg height="250" width="250" style="display:block; margin-left:auto; margin-right:auto; width: 40%;">

<circle id="s1" cx="120" cy="112" r="110" style="fill:brown;stroke:black;stroke-width:5;" />

  <polygon id="s2" points="120,10 60,198 210,78 30,78 180,198"
fill-rule="nonzero" style="fill:lime;stroke:black;stroke-width:5;"/>

 Ο φυλλομετρητής σου δεν υποστηρίζει ενσωμάτωση εικόνων SVG.
</svg>

<button onclick="
document.getElementById('s1').style.fill='blue';
document.getElementById('s2').style.fill='red';
">
αλλαγή χρωμάτων
</button>

<button onclick="
document.getElementById('s1').setAttribute('r', 60);
document.getElementById('s2').setAttribute('fill-rule', 'evenodd');
">
αλλαγή σχήματος
</button>

</body>
</html>











ΑΣΚΗΣΗ #5.1: Δοκιμάστε να τροποποιήσετε το παράδειγμα #1 για να σχεδιαστούν οι ολυμπιακοί κύκλοι όπως φαίνεται στην εικόνα κάτω.

 

ΑΣΚΗΣΗ #5.2: Δοκιμάστε να τροποποιήσετε το παράδειγμα #1 για να σχεδιαστούν τα μάτια όπως φαίνεται στην εικόνα κάτω.Μπορείτε να τα κάνετε με το πάτημα κουμπιού να κοιτάνε αριστερά ή δεξιά;


Ο φυλλομετρητής σου δεν υποστηρίζει ενσωμάτωση εικόνων SVG.






ΑΣΚΗΣΗ #5.3: Δοκιμάστε να τροποποιήσετε το παράδειγμα #3 τοποθετώντας το αστέρι μέσα σε ένα ορθογώνιο το οποίο θα μπορεί να αλλάξει χρώμα από μπλε σε κόκκινο.



στις Δεν υπάρχουν σχόλια:

Δευτέρα 13 Απριλίου 2020

Javascript - Μάθημα #4

Εισαγωγή στην Javascript - Μάθημα #4

  Μεταβλητές: είσοδος / έξοδος σε HTML με JS



Η Javascript μπορεί να χρησιμοποιεί μεταβλητές στις οποίες εισάγονται (καταχωρούνται) τιμές από τον χρήστη με είσοδο από το πληκτρολόγιο και μπορεί να εξάγει τις τιμές μεταβλητών μέσα στην ιστοσελίδα HTML.

Στο παρακάτω παράδειγμα χρησιμοποιούνται δύο πλαίσια εισαγωγής στα οποία ζητείται να εισαχθούν το όνομα και το επώνυμο του χρήστη και με το πάτημα του πρώτου κουμπιού εμφανίζεται το ονοματεπώνυμο του χρήστη. Με το πάτημα του δεύτερου κουμπιού γίνεται καθαρισμός των πεδίων.

Οι 2 μεταβλητές που χρησιμοποιούνται για να αποθηκεύσουν το όνομα και το επώνυμο ορίζονται με την χρήση της δεσμευμένης λέξης var.


ΠΑΡΑΔΕΙΓΜΑ #4.1:
<!DOCTYPE html>
<html>
<body>

<p>Δώσε το όνομα και το επώνυμο σου στα παρακάτω πλαίσια εισαγωγής:</p>

  Όνομα:  <input type="text"  id="input1">  <br>
  Επώνυμο: <input type="text" id="input2">  <br><br>
 
<p>Πάτησε το παρακάτω κουμπί για να εμφανιστεί το ονοματεπώνυμό σου:</p>

<button type="button" onclick='
var inval1 = document.getElementById("input1").value;
var inval2 = document.getElementById("input2").value;
document.getElementById("output").innerHTML = inval1 + " " +inval2;
'>
Εμφάνισε ονοματεπώνυμο!
</button>

<p>Το ονοματεπώνυμό σου εμφανίζεται παρακάτω:</p>
<p id="output" style="font-size:25px"></p>

<button type="button" onclick='
document.getElementById("input1").value ="";
document.getElementById("input2").value ="";
document.getElementById("output").innerHTML ="";
'>
Καθαρισμός
</button>

</body>
</html>



Εισάγετε τις εντολές HTML στο γαλάζιο πλαίσιο.
Η ιστοσελίδα που αντιστοιχεί στις εντολές φαίνεται στο λευκό πλαίσιο πιο κάτω:
(Αρχικά δοκιμάστε να μεταφέρετε όλες τις εντολές με ΑΝΤΙΓΡΑΦΗ-ΕΠΙΚΟΛΛΗΣΗ.
Στην συνέχεια μπορείτε να κάνετε αλλαγές και να δοκιμάσετε να αλλάξετε όπως θέλετε
την λειτουργικότητα του κάθε παραδείγματος.)


Στο παρακάτω παράδειγμα γίνεται η προσομοίωση μιας αριθμομηχανής:

ΠΑΡΑΔΕΙΓΜΑ #4.2:
<!DOCTYPE html>
<html>
<body>

<h2>Τι μπορεί να κάνει η JAVASCRIPT:</h2>
<h3>Προσομοίωση αριθμομηχανής</h3>
<p>Εισάγετε δύο αριθμούς στα πλαίσια εισαγωγής:</p>

  Αριθμός #1:  <input type="number"  id="input1">  <br>
  Αριθμός #2:  <input type="number"  id="input2">  <br><br>



<button type="button" onclick='
var inval1 = document.getElementById("input1").value;
var inval2 = document.getElementById("input2").value;
var result = Number(inval1) + Number(inval2);
document.getElementById("output").innerHTML = result;
'>
(+)
</button>

<button type="button" onclick='
var inval1 = document.getElementById("input1").value;
var inval2 = document.getElementById("input2").value;
var result = Number(inval1) - Number(inval2);
document.getElementById("output").innerHTML = result;
'>
(-)
</button>

<button type="button" onclick='
var inval1 = document.getElementById("input1").value;
var inval2 = document.getElementById("input2").value;
var result = Number(inval1) * Number(inval2);
document.getElementById("output").innerHTML = result;
'>
(x)
</button>

<button type="button" onclick='
var inval1 = document.getElementById("input1").value;
var inval2 = document.getElementById("input2").value;
var result = Number(inval1) / Number(inval2);
document.getElementById("output").innerHTML = result;
'>
(:)
</button>

<button type="button" onclick='
document.getElementById("input1").value="";
document.getElementById("input2").value="";
document.getElementById("output").innerHTML = "";
'>
(C)
</button>

<p>Το αποτέλεσμα είναι:</p>
<p id="output" style="font-size:25px"></p>

</body>
</html>



ΑΣΚΗΣΗ #4.1: Δοκιμάστε να τροποποιήσετε το παράδειγμα #1 για να εισάγεται και να τυπώνεται εκτός από το ονοματεπώνυμο, η διεύθυνση και το τηλέφωνο.

Δώσε το όνομα και το επώνυμο σου στα παρακάτω πλαίσια εισαγωγής:

Όνομα:
Επώνυμο:
Κινητό:

Πάτησε το παρακάτω κουμπί για να εμφανιστεί το ονοματεπώνυμό σου:

Το ονοματεπώνυμό σου εμφανίζεται παρακάτω:


ΑΣΚΗΣΗ #4.2: Δοκιμάστε να τροποποιήσετε το παράδειγμα #2 για να εισάγεται ένας αριθμός και και να τυπώνεται το τετράγωνο και η τετραγωνική ρίζα του. Θα χρειαστείτε:
Math.pow(x, y) επιστρέφει την δύναμη x υψωμένο στο y
Math.sqrt(x) επιστρέφει την τετραγωνική ρίζα του x



στις Δεν υπάρχουν σχόλια:

Κυριακή 5 Απριλίου 2020

Javascript - Μάθημα #3

Εισαγωγή στην Javascript - Μάθημα #3

Αλλαγή της μορφοποίησης (CSS) στοιχείων HTML με JS



Η Javascript μπορεί να αλλάξει και τις ιδιότητες μορφοποίησης των στοιχείων της ιστοσελίδας με εντολές CSS.


ΠΑΡΑΔΕΙΓΜΑ #3.1:
<!DOCTYPE html>
<html>
<body id="change3">

<h2>Τι μπορεί να κάνει η JAVASCRIPT:</h2>

<p>H JavaScript μπορεί να αλλάξει το στυλ ενός στοιχείου HTML:</p>

<p id="change1">Αν πατηθεί το παρακάτω κουμπί θα μεγαλώσουν τα γράμματα αυτής της παραγράφου.</p>

<button type="button" onclick="document.getElementById('change1').style.fontSize='35px'">
Άλλαξε το μέγεθος!
</button>

<p id="change2">Αν πατηθούν τα παρακάτω κουμπιά θα αλλάξουν χρώμα τα γράμματα αυτής της παραγράφου και θα σχεδιαστεί ένα πλαίσιο.</p>

<button type="button" onclick="document.getElementById('change2').style.color='red'">
Άλλαξε το χρώμα!
</button>

<button type="button" onclick="document.getElementById('change2').style.border='5px solid blue'">
Βάλε πλαίσιο!
</button>

<p>Αν πατηθεί το παρακάτω κουμπί θα αλλάξει το χρώμα φόντου όλης της ιστοσελίδας.</p>

<button type="button" onclick="document.getElementById('change3').style.background='lime'">
Άλλαξε το χρώμα!
</button>

</body>
</html>



Εισάγετε τις εντολές HTML στο γαλάζιο πλαίσιο.
Η ιστοσελίδα που αντιστοιχεί στις εντολές φαίνεται στο λευκό πλαίσιο πιο κάτω:
(Αρχικά δοκιμάστε να μεταφέρετε όλες τις εντολές με ΑΝΤΙΓΡΑΦΗ-ΕΠΙΚΟΛΛΗΣΗ.
Στην συνέχεια μπορείτε να κάνετε αλλαγές και να δοκιμάσετε να αλλάξετε όπως θέλετε
την λειτουργικότητα του κάθε παραδείγματος.)


Στο παρακάτω παράδειγμα με το πάτημα του κουμπιού αλλάζει η μορφοποίηση ολόκληρης της παραγράφου:

ΠΑΡΑΔΕΙΓΜΑ #3.2:
<!DOCTYPE html>
<html>
<body>

<h2>Τι μπορεί να κάνει η JAVASCRIPT:</h2>

<p>Πατήστε το παρακάτω κουμπί για να αλλάξει η μορφοποίηση της παραγράφου που ακολουθεί:</p>

<button type="button" onclick="
document.getElementById('change').style.background='red';
document.getElementById('change').style.border='5px solid blue';
document.getElementById('change').style.color='white';
document.getElementById('change').style.margin='50px';
document.getElementById('change').style.padding='10px';
">
Άλλαξε την μορφοποίηση!
</button>

<p id="change">"Ο σκοπός ενός φυλλομετρητή είναι να διαβάζει τα έγγραφα HTML και να τα συνθέσει σε σελίδες που μπορεί κανείς να διαβάσει ή να ακούσει. Ο browser δεν εμφανίζει τις ετικέτες HTML, αλλά τις χρησιμοποιεί για να παρουσιάσει το περιεχόμενο της σελίδας.".</p>

</body>
</html>



ΑΣΚΗΣΗ #3.1: Δοκιμάστε να τροποποιήσετε το παράδειγμα #2 για να αλλάξετε την μορφοποίηση της παραγράφου όπως επιθυμείτε εσείς, με 2 διαφορετικές μορφοποιήσεις.


Η Javascript είναι μια γλώσσα προγραμματισμού που μπορεί να εμπλουτίσει μια ιστοσελίδα HTML με δυνατότητες αλληλεπίδρασης με τον χρήστη. Αυτή είναι και η πιο συνηθισμένη χρήση της JavaScript οπότε μπορούμε να αναφερόμαστε σε δυναμικές ιστοσελίδες ή δυναμική HTML σε αντίθεση με τις στατικές ιστοσελίδες (στατική HTML) που απλά εμφανίζεται το περιεχόμενο τους χωρίς να παρέχουν δυνατότητες αλληλεπίδρασης με τον χρήστη.





στις Δεν υπάρχουν σχόλια:

Javascript - Μάθημα #2

Εισαγωγή στην Javascript - Μάθημα #2

Αλλαγή ιδιοτήτων (attributes) HTML με JS


Εκτός από την δυναμική αλλαγή των περιεχομένων της ιστοσελίδας HTML η Javascript μπορεί να αλλάξει και τις ιδιότητες των αντικειμένων. Στο παράδειγμα που ακολουθεί με την βοήθεια της  Javascript μπορούμε να αλλάξουμε την ιδιότητα src (source) σε εικόνες δηλαδή να παραπέμπουμε σε διαφορετική πηγή (διαφορετικό αρχείο εικόνας) για την προβαλλόμενη εικόνα.

Οι εικόνες που θα χρησιμοποιήσουμε είναι οι εξής:
 

Οι εικόνες αυτές αντιστοιχούν στις διευθύνσεις URL:

Η λειτουργία του παρακάτω παραδείγματος είναι να φαίνεται πως με το πάτημα του κατάλληλου κουμπιού θα ανάβει ή θα σβήνει ο λαμπτήρας:

ΠΑΡΑΔΕΙΓΜΑ #2.1:
<!DOCTYPE html>
<html>
<body style="background-color: black; color:lime;">

<h2>Τι μπορεί να κάνει η JAVASCRIPT:</h2>

<p>Με την JavaScript μπορούμε να αλλάξουμε τις τιμές των ιδιοτήτων HTML.</p>

<p>Σε αυτό το παράδειγμα η JavaScript αλλάζει την τιμή της ιδιότητας src (source) σε εικόνες.</p>

<p>ΠΡΟΣΟΜΟΙΩΣΗ ΛΑΜΠΑΣ (ΑΝΑΜΜΑ_ΣΒΗΣΙΜΟ):</p>

<button onclick="document.getElementById('myImage').src=
'https://i.ibb.co/7RgGSgj/bulb-on.jpg'">
Άναψε το φως
</button>

<img id="myImage" src="https://i.ibb.co/zxkh09s/bulb-off.jpg" style="width:200px">

<button onclick="document.getElementById('myImage').src=
'https://i.ibb.co/zxkh09s/bulb-off.jpg'">
Σβήσε το φως
</button>

</body>
</html>



Εισάγετε τις εντολές HTML στο γαλάζιο πλαίσιο.
Η ιστοσελίδα που αντιστοιχεί στις εντολές φαίνεται στο λευκό πλαίσιο πιο κάτω:
(Αρχικά δοκιμάστε να μεταφέρετε όλες τις εντολές με ΑΝΤΙΓΡΑΦΗ-ΕΠΙΚΟΛΛΗΣΗ.
Στην συνέχεια μπορείτε να κάνετε αλλαγές και να δοκιμάσετε να αλλάξετε όπως θέλετε
την λειτουργικότητα του κάθε παραδείγματος.)


Στο παρακάτω παράδειγμα θα χρησιμοποιηθούν οι εικόνες:


Οι εικόνες αυτές αντιστοιχούν στις διευθύνσεις URL:

Η λειτουργία του παρακάτω παραδείγματος είναι η προσομοίωση φωτεινού σηματοδότη:

ΠΑΡΑΔΕΙΓΜΑ #2.2:
<!DOCTYPE html>
<html>
<body style="background-color: white; color: darkred;">

<h2>Τι μπορεί να κάνει η JAVASCRIPT:</h2>

<p>Με την JavaScript μπορούμε να αλλάξουμε τις τιμές των ιδιοτήτων HTML.</p>

<p>Σε αυτό το παράδειγμα η JavaScript αλλάζει την τιμή της ιδιότητας src (source) σε εικόνες.</p>

<p>ΠΡΟΣΟΜΟΙΩΣΗ ΦΩΤΕΙΝΟΥ ΣΗΜΑΤΟΔΟΤΗ:</p>

<button onclick="document.getElementById('myImage').src=
'https://i.ibb.co/025YJbM/trafficlight-GREEN.jpg'">
Πράσινο φως
</button>

<img id="myImage" src="https://i.ibb.co/gyYwWbC/trafficlight-OFF.jpg" style="width:100px">

<button onclick="document.getElementById('myImage').src=
'https://i.ibb.co/gyYwWbC/trafficlight-OFF.jpg'">
Σβήσε τα όλα
</button>

</body>
</html>



ΑΣΚΗΣΗ #2.1: Προσπαθήστε να τροποποιήσετε το παράδειγμα #1 ώστε να προστεθεί και δεύτερος λαμπτήρας δίπλα στον πρώτο. Οι δύο λαμπτήρες θα πρέπει να ανάβουν και να σβήνουν ταυτόχρονα.





ΑΣΚΗΣΗ #2.2: Προσπαθήστε να συμπληρώσετε το παράδειγμα #2 ώστε η ιστοσελίδα σας να περιέχει 4 κουμπιά που να αντιστοιχούν στις 4 καταστάσεις ενός φωτεινού σηματοδότη: ΣΒΗΣΤΟΣ - ΠΡΑΣΙΝΟ - ΚΙΤΡΙΝΟ - ΚΟΚΚΙΝΟ



ΠΡΟΣΟΜΟΙΩΣΗ ΦΩΤΕΙΝΟΥ ΣΗΜΑΤΟΔΟΤΗ:





ΑΣΚΗΣΗ #2.3: Χρησιμοποιήστε 4 λάμπες για να πετύχετε το παρακάτω αποτέλεσμα:

ΠΡΟΣΟΜΟΙΩΣΗ ΛΑΜΠΑΣ (ΑΝΑΜΜΑ_ΣΒΗΣΙΜΟ):









στις Δεν υπάρχουν σχόλια:

Σάββατο 4 Απριλίου 2020

Javascript - Μάθημα #1

Εισαγωγή στην Javascript - Μάθημα #1

Αλλαγή περιεχομένου HTML με JS


Η Javascript είναι μια γλώσσα προγραμματισμού που μπορεί να εμπλουτίσει μια ιστοσελίδα HTML με δυνατότητες αλληλεπίδρασης με τον χρήστη. Αυτή είναι και η πιο συνηθισμένη χρήση της JavaScript οπότε μπορούμε να αναφερόμαστε σε δυναμικές ιστοσελίδες ή δυναμική HTML σε αντίθεση με τις στατικές ιστοσελίδες (στατική HTML) που απλά εμφανίζεται το περιεχόμενο τους χωρίς να παρέχουν δυνατότητες αλληλεπίδρασης με τον χρήστη.


ΠΑΡΑΔΕΙΓΜΑ #1.1:
<!DOCTYPE html>
<html>
<body>

<h2>ΠΑΡΑΔΕΙΓΜΑ #1: Τι μπορούμε να κάνουμε με την Javascript:</h2>
<p>Μπορούμε να αλλάξουμε τα περιεχόμενα της ιστοσελίδας.</p> 

<p id="change">
Αν πατήσεις το κουμπί θα αλλάξει αυτή η πρόταση.
</p>

<button type="button" onclick='document.getElementById("change").innerHTML =
"Η πρόταση άλλαξε μόλις πάτησες το κουμπί !!!"'>
Πάτησε με!
</button>

</body>
</html>



Εισάγετε τις εντολές HTML στο γαλάζιο πλαίσιο.
Η ιστοσελίδα που αντιστοιχεί στις εντολές φαίνεται στο λευκό πλαίσιο πιο κάτω:
(Αρχικά δοκιμάστε να μεταφέρετε όλες τις εντολές με ΑΝΤΙΓΡΑΦΗ-ΕΠΙΚΟΛΛΗΣΗ.
Στην συνέχεια μπορείτε να κάνετε αλλαγές και να δοκιμάσετε να αλλάξετε όπως θέλετε
την λειτουργικότητα του κάθε παραδείγματος.)


ΠΑΡΑΔΕΙΓΜΑ #1.2:
<!DOCTYPE html>
<html>
<body>

<h2>ΠΑΡΑΔΕΙΓΜΑ #2: Τι μπορούμε να κάνουμε με την Javascript:</h2>
<p>Μπορούμε να αλλάξουμε τα περιεχόμενα της ιστοσελίδας.</p> 

<p id="change">
Αν πατήσεις το κουμπί θα αλλάξει αυτή η πρόταση.
</p>

<button type="button" onclick='document.getElementById("change").innerHTML =
"Πάτησες το κουμπί (Α)."'>
Κουμπί (Α)
</button>

<button type="button" onclick='document.getElementById("change").innerHTML =
"Πάτησες το κουμπί (Β)."'>
Κουμπί (Β)
</button>

<button type="button" onclick='document.getElementById("change").innerHTML =
"Πάτησες το κουμπί (Γ)."'>
Κουμπί (Γ)
</button>

</body>
</html>


ΠΑΡΑΔΕΙΓΜΑ #1.3:
<!DOCTYPE html>
<html>
<body>

<h2>ΠΑΡΑΔΕΙΓΜΑ #3: Τι μπορούμε να κάνουμε με την Javascript:</h2>
<p>Μπορούμε να αλλάξουμε τα περιεχόμενα της ιστοσελίδας.</p> 

<p id="change1">
Αν πατήσεις το κουμπί (Α) θα αλλάξει αυτή η πρόταση.
</p>

<p id="change2">
Αν πατήσεις το κουμπί (Β) θα αλλάξει αυτή η πρόταση.
</p>

<p id="change3">
Αν πατήσεις το κουμπί (Γ) θα αλλάξει αυτή η πρόταση.
</p>

<button type="button" onclick='document.getElementById("change1").innerHTML =
"Πάτησες το κουμπί (Α)."'>
Κουμπί (Α)
</button>

<button type="button" onclick='document.getElementById("change2").innerHTML =
"Πάτησες το κουμπί (Β)."'>
Κουμπί (Β)
</button>

<button type="button" onclick='document.getElementById("change3").innerHTML =
"Πάτησες το κουμπί (Γ)."'>
Κουμπί (Γ)
</button>

</body>
</html>



ΑΣΚΗΣΗ #1.1: Προσπαθήστε να μετατρέψετε τα παραπάνω παραδείγματα ώστε η ιστοσελίδα σας να περιέχει 4 κουμπιά με την λειτουργικότητα που φαίνεται στην εικόνα κάτω:


στις Δεν υπάρχουν σχόλια:
Εγγραφή σε: Αναρτήσεις (Atom)