forked from agotsinasInstructor/Javascript
-
Notifications
You must be signed in to change notification settings - Fork 0
/
jsButtons.html
106 lines (94 loc) · 5.19 KB
/
jsButtons.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!--
[Author] Gotsinas Antonios
[Μεταβλητές και javascript]
[Description]
Σε αυτό το παράδειγμα μελετάμε τις μεταβλητές στην javascript και τους διάφορους τρόπους
χρήσης τους σε προγράμματα.
-->
<!DOCTYPE html>
<html>
<head>
<title>Javascript SSOC</title>
<style>
/* Μορφοποίηση css για να φτιάξω ένα πλέγμα απο div*/
/* όλα τα στοιχεία να συμπεριλαμβάνουν στο μέγεθός τους τα padding, margin, border*/
* {
box-sizing: border-box;
}
/* Μορφοποίηση του container που θα φιλοξενήσει το πλέγμα*/
.container {
width: 50%;
}
/* Μορφοποίηση κάθε στήλης*/
.column {
float:left;
width: 20%;
padding: 2px;
}
/* Ειδική μορφοποίηση που θα εφαρμοστεί στο κελί που θα φιλοξενήσει το κουμπί υπολογισμού*/
.btn {
float:left;
width: 20%;
padding: 2px;
text-align: right; /* απλά αλλάζω την στοίχιση του κειμένου στα δεξιά*/
}
/* Μορφοποίηση έτσι ώστε μετά απο κάθε εφαρμογή της μορφοποίησης .row να υπάρχει κενό περιεχόμενο*/
.row::after {
content: "";
display: table;
clear: both;
}
/* Μορφοποίηση των στοιχείων input ώστε να καταλαμβάνουν το 100% του γονέα που τα φιλοξενεί*/
.inelements {
width: 100%;
overflow: hidden; /* σε περίπτωση που το κείμενο δεν χωράει μέσα στα στοιχεία κρύψτο*/
}
</style>
</head>
<body>
<!-- Δημιουργώ μία δική μου οθόνη με κώδικα html και την μορφοποιώ με css
έτσι ώστε να εμφανίζω τα αποτελέσματα των παραδειγμάτων μου σε αυτήν.-->
<h2>Οθόνη αποτελεσμάτων JavaScript</h2>
<div style = "border: 2px solid black; width: 500px; height: 500px; padding: 10px;">
<!-- Δημιουργώ μερικές γραμμές στην οθόνη μου
δίνοντάς τους id για να εμφανίζω σε αυτές τα αποτελέσματα-->
<p id = "grammi1"></p>
<p id = "grammi2"></p>
<p id = "grammi3"></p>
</div>
<br>
<!-- μορφοποίηση div σε μορφή πίνακα για να φιλοξενήσει τα πεδία εισαγωγής τιμών
και το πλήκτρο υπολογισμού-->
<div class="container">
<!-- η πρώτη γραμμή θα περιέχει τις ετικέτες των στοιχείων εισόδου-->
<div class="row">
<div class="column"> <label for="value1">x</label></div>
<div class="column"> <label for="value2">y</label></div>
</div>
<!-- η δεύτερη γραμμή θα περιέχει τα στοιχεία εισόδου-->
<div class="row">
<div class="column"> <input id="value1" class="inelements"></div>
<div class="column"> <input id="value2" class="inelements"></div>
</div>
<!-- η τρίτη γραμμή θα περιέχει το πλήκτρο υπολογισμού στη δεύτερη στήλη με στοίχιση στα δεξιά-->
<div class="row">
<div class="column"></div>
<div class="btn"><button onclick="add()" class="inelements">Πρόσθεση</button></div>
</div>
</div>
<!--Κώδικας Javascript-->
<script>
// Συνάρτηση με τη μορφή διαδικασίας που εκτελεί άθροισμα των τιμών που έχει εισαγάγει ο χρήστης στα πεδία input της σελίδας
function add(){
// θέσε στη μεταβλητή a την τιμή που έχει εισαγάγει ο χρήστης στο πεδίο value1 αφού το μετατρέψεις σε ακέραιο αριθμό
let a = parseInt(document.getElementById("value1").value);
// θέσε στη μεταβλητή b την τιμή που έχει εισαγάγει ο χρήστης στο πεδίο value2 αφού το μετατρέψεις σε ακέραιο αριθμό
let b = parseInt(document.getElementById("value2").value);
// υπολογίσε το άθροισμα των μεταβλητών αυτό και τοποθέτησέ το στη μεταβλητή sum
let sum = a+b;
// εμφάνισε το αποτέλεσμα του αθροίσματος με ένα κείμενο επεξήγησης στην γραμμή 1 της οθόνης που φτιάξαμε
document.getElementById("grammi1").innerHTML = "Το άθροισμα των τιμών x + y είναι " + sum;
}
</script>
</body>
</html>