ΗΤΜL Μάθημα 2

Βάλτε τίτλο : "Άξιον Εστί"

Χρησιμοποιήστε τις ετικέτες <BR> για αλλαγή γραμμής  (εδώ στο τέλος κάθε στίχου), 

<P> ... </P> για παράγραφο  ( εδώ για στροφή του ποιήματος) 

και   τις επικεφαλίδες
<Η1>...</Η1> , <Η2>...</Η2>, <Η3>...</H3  για τα "Οδυσσέας Ελύτης", "Άξιον Εστί" και "Ανάγνωσμα Πρώτο" αντίστοιχα, για να γράψετε σε HTML το απόσπασμα από το  Άξιον Εστί του Οδυσσέα Ελύτη όπως φαίνεται παρακάτω:

Οδυσσέας Ελύτης

Άξιον Εστί

ΑΝΑΓΝΩΣΜΑ ΠΡΩΤΟ

                              Η ΠΟΡΕΙΑ ΠΡΟΣ ΤΟ ΜΕΤΩΠΟ

       Ξημερώνοντας τ' Αγιαννιού, με την αύριο των Φώτων, λάβαμε τη
διαταγή να κινήσουμε πάλι μπροστά, για τα μέρη όπου δεν έχει κα-
θημερινές και σκόλες. Έπρεπε, λέει, να πιάσουμε τις γραμμές που
κρατούσανε ως τότε οι Αρτινοί, από Χιμάρα ως Τεπελένι. Λόγω που
εκείνοι πολεμούσανε απ' την πρώτη μέρα, συνέχεια, κι είχαν μείνει
σκεδόν οι μισοί και δεν αντέχανε άλλο.

        Δώδεκα μέρες κιόλας είχαμε μεις πιο πίσω, στα χωριά. Κι απάνω

που συνήθιζε τ' αυτί μας πάλι στα γλυκά τριξίματα της γης, και δειλά
συλλαβίζαμε το γάβγισμα του σκύλου ή τον αχό της μακρινής καμπά-
νας, να που ήταν ανάγκη, λέει, να γυρίσουμε στο μόνο αχολόι που
ξέραμε: στο αργό και στο βαρύ των κανονιών, στο ξερό και στο γρή-
γορο των πολυβόλων.

HTML Μάθημα 1

HTML Μορφοποίηση κειμένου

Τα αρχικά HTML προέρχονται από τις λέξεις HyperText Markup Language. Είναι μια περιγραφική γλώσσα, δηλαδή ένας ειδικός τρόπος γραφής κειμένου και κλήσης άλλων αρχείων ή εφαρμογών βασισμένος σε οδηγίες (tags).

Ανοίξτε  ένα σημειωματάριο (notepad) των windows και γράψτε τα παρακάτω:

<HTML>

<HEAD>
<TITLE>
ΠΡΩΤΗ ΕΡΓΑΣΙΑ ΗΤΜL
</TITLE>
</HEAD>
<BODY>

Αυτή είναι η πρώτη μου εργασία στην HTML . Την έκανα στο εργαστήριο Εφαρμογές Υπολογιστών του Λυκείου Κορωπίου.

</BODY>
</HTML>
Η εντολή HTML γνωστοποιεί ότι γράφουμε τη γλώσσα αυτή, ενώ το BODY γνωστοποιεί ότι γράφουμε το κυρίως μέρος (χωρίς τίτλο) της ιστοσελίδας

-Αν θέλουμε να κάνουμε  μία λέξη (ή λέξεις) να φαίνεται με έντονα γράμματα (Bold)  τότε βάζουμε πριν από αυτή το <b> και στο τέλος της το </b> :

Τροποποιείστε   τη λέξη «πρώτη» στο παραπάνω κείμενο ώστε να φαίνεται με έντονα γράμματα:

<b> πρώτη </b>

-          Όμοια για πλάγια γράμματα (italics) : <i> λέξη </i>

 Εφαρμόστε πλάγια γράμματα για τη λέξη «HTML»

-          Όμοια για υπογράμμιση :  <u> λέξη </u>

Εφαρμόστε υπογράμμιση  στις λέξεις : «Εφαρμογές Υπολογιστών» 

-          Για έντονη και πλάγια μαζί : <b><i> Λέξη</i></b>

Εφαρμόστε έντονη γραφή και πλάγια μαζί στις λέξεις : «Λυκείου Κορωπίου»
Παρατηρήστε τον Τίτλο : "ΠΡΩΤΗ ΕΡΓΑΣΙΑ ΗΤΜL" στο πάνω μέρος του φυλλομετρητή.

Όταν τελειώσετε αποθηκεύστε το αρχείο σας με κάποιο όνομα και κατάληξη .html
Παράδειγμα: a1.html 
Ανοίξτε τώρα την ιστοσελίδα σας με ένα φυλλομετρητή (browser)

Εισαγωγή δεδομένων μέσω φόρμας στο Javascript - Ασκήσεις

1. Ξενοδοχειακή επιχείρηση διαθέτει 20 δωμάτια. Ο συνολικός αριθμός των υπαλλήλων που απασχολούνται ημερησίως στο ξενοδοχείο εξαρτάται από τα κατειλημμένα δωμάτια και δίνεται από τον παρακάτω πίνακα

Αριθμός κατειλημμένων δωματίων	Συνολικός αριθμός υπαλλήλων
από 0 μέχρι 4	3
από 5 μέχρι 8	4
πάνω από 8	6

Να εισάγεται μέσω φόρμας ο αριθμός κατειλημμένων δωματίων  και δεδομένου ότι ο κάθε υπάλληλος μισθοδοτείται με 800 Ευρώ, να υπολογίζονται και εμφανίζονται συνολικά τα έξοδα μισθοδοσίας.

2.Η Φορολόγηση εισοδήματος γίνεται ως εξής:

Εισόδημα €	Φόρος %
<=20000	22
<= 30000	29
<=40000	37
>40000	45

Η χρέωση είναι κλιμακωτή

Να καταχωρείται σε μια φόρμα το εισόδημα και να υπολογίζεται και εμφανίζεται ο φόρος.

  3. Να δημιουργηθεί πρόγραμμα που θα δέχεται δύο αριθμούς μέσω φόρμας και θα εμφανίζει το μεγαλύτερο από αυτούς.

4. Να γραφεί πρόγραμμα που θα διαβάζει τις απουσίες και το μέσο όρο και θα εμφανίζει:

"Απορρίπτεται" αν ο μέσος όρος είναι μικρότερος του 9,5.

"Ανεπαρκής φοίτηση" αν οι απουσίες είναι περισσότερες των 114.

Προάγεται αν δεν ισχύουν τα δύο παραπάνω.

5. Οι  βαθμοί σε κάποιες εξετάσεις είναι 0-100. Διορθώνουν τρεις βαθμολογητές. Ο τελικός βαθμός είναι ο μέσος όρος των 2 πρώτων βαθμολογητών. Αν προκύψει διαφορά μεγαλύτερη των 11 μορίων, τότε ο τελικός βαθμός είναι ο μέσος όρος των τριών βαθμών. Να γραφεί πρόγραμμα που θα εκχωρεί το ονοματεπώνυμο του μαθητή σε μια μεταβλητή, τους βαθμούς των τριών βαθμολογητών σε τρεις άλλες και θα εμφανίζει το ονοματεπώνυμο και   τον τελικό βαθμό.

Δομή επανάληψης for στη javascript

Υπάρχει περίπτωση να χρειάζεται να εκτελείτε πολλές φορές μία ομάδα εντολών.
Τη λύση μας τη δίνει η δομή επανάληψης.
Ας υποθέσουμε ότι θέλουμε να εμφανίσουμε τους αριθμούς από 1 ως 7.
Δεν είναι σωστό να γράψουμε πολλές φορές την ίδια εντολή.
Αντίθετα, γράφουμε:

<html>
<body>


<p id="demo"></p>

<script>
var text = "";
var i;
for (i = 1; i <= 7; i++) {
  text += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Παρατηρούμε ότι η μεταβλητή i παίρνει αρχικά την τιμή 1 και ύστερα ελέγχεται αν είναι μικρότερη ή ίση του 7. Αν είναι, εκτελούνται οι εντολές (βρόχος-loop) και το i αυξάνει κατά ένα (i++ ).

 O  τρόπος που βγάζει μηνύματα η javascript θα έσβηνε κάθε φορά το προηγούμενο μήνυμα. Γι αυτό βάζει:  text += "The number is " + i + "<br>";
Αυτό είναι ισοδύναμο με :
text=text+ "The number is " + i + "<br>";
Δηλαδή, η νέα τιμή της μεταβλητής text θα είναι η προηγούμενη συν αυτή που μόλις υπολογίστηκε.
Έτσι, διατηρούνται όλες οι προηγούμενες!
Το ίδιο θα συμβεί και με το άθροισμα.

 Άθροισμα

Το άθροισμα πολλών αριθμών γίνεται με τη βοήθεια της δομής επανάληψης.

Η ιδέα είναι ότι η νέα τιμή ισούται με την παλιά που είχε η μεταβλητή συν την καινούρια.

Δημιουργούμε μία μεταβλητή, κ (αθροιστής)  και της δίνουμε αρχική τιμή μηδέν.

μετά, μέσα σε ένα for  προσθέτουμε τη νέα τιμή στο κ:

Έτσι, αν θέλουμε να βρούμε το άθροισμα των αριθμών από 1 ως 10 γράφουμε:

<script>
var k= 0;
var i;
for (i = 1; i <= 10; i++) {
  k+=   i;
}
document.getElementById("demo").innerHTML = k;
</script>

 Πλήθος

 Για να βρεθεί το πλήθος, μηδενίζουμε πάλι τον αθροιστή κ και κάθε φορά προσθέτουμε το ένα.

Για παράδειγμα, αν θέλουμε να βρούμε το πλήθος των αριθμών από 1 ως 10 που είναι μεγαλύτεροι του 3, γράφουμε:

<script>

var k=0;
var i;

for (i = 1; i <= 10; i++) {

if (i>3) {
  k+=  1;
}
}

document.getElementById("demo").innerHTML = k;

</script>

Γινόμενο

Προφανώς στο γινόμενο το p θα είναι 1 και θα ισχύει p*=i

Έστω ότι θέλουμε να βρούμε το ν παραραγοντικό:

ν!= 1*2*3*4...*ν

<script>
var p= 1;
var i;
for (i = 1; i <= 10; i++) {
  p*=   i;
}
document.getElementById("demo").innerHTML = p;
</script>

Ασκήσεις

1. Να βρεθεί το άθροισμα των αριθμών από 0 ως 100 που είναι άρτιοι.

2. Να βρεθεί το πλήθος των αριθμών από 1 ως 50 που είναι πολλαπλάσια του 3.

3. Να βρεθεί το γινόμενο των αριθμών από 1 ως 20  που είναι περιττοί.

4. Να παρουσιάζονται οι αριθμοί από 1 ως 7 και δίπλα  η αντίστοιχη ημέρα της εβδομάδας. 1-Δευτέρα, 2- Τρίτη, κ.ο.κ.

5.  Να βρεθεί το άθροισμα:

 

6. Να βρεθεί το αποτέλεσμα: Σ=1-2+3-4+5-6+7-8+...-50 

7. Κάντε να εμφανίζονται οι αριθμοί 5,10,15,20,...,100

Εισαγωγή δεδομένων μέσω φόρμας στο javascript

Μέχρι στιγμής η εισαγωγή γινόταν με εκχώριση τιμής σε μεταβλητή από την αρχή του προγράμματος.
Αυτό, όμως, δε μπορεί να το κάνει ο χρήστης, αλλά μόνο ο προγραμματιστής.

Υπάρχει τρόπο να βάζει τις τιμές των μεταβλητών ο χρήστης μέσω φόρμας.
Ας πάρουμε το απλό παράδειγμα όπου ο χρήστης βάζει έναν αριθμό και το πρόγραμμα αποφαίνεται αν αυτός είναι θετικός ή αρνητικός:


<!DOCTYPE html>
<html>
<body>


<input id="numb">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x;

  // Get the value of the input field with id="numb"
  x = document.getElementById("numb").value;

  // If x is Not a Number or less than one or greater than 10
  if ( x < 0 ) {
    text = "Αρνητικός";
  } else {
    text = "Θετικός";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

Στο παραπάνω πρόγραμμα είναι προφανές ότι δηλώνεται  πως το δεδομένο που θα γραφεί στη φόρμα είναι αριθμός και του βάζουμε ετικέτα "numb".
Μόλις πατηθεί το κουμπί (button) καλέι τη συνάρτηση myFunction().
Αυτή εκχωρεί την τιμή που έχει δώσει ο χρήστης(numb) σε μία μεταβλητή x.
Εν συνεχεία, ακολουθεί η εξέταση του x και η εμφάνιση κατάλληλων μηνυμάτων ενημέρωσης του χρήστη.

Ασκήσεις

1. Να γραφεί πρόγραμμα που να διαβάζει το μέσο όρο και να αποφαίνεται αν ο μαθητής προάγεται ή απορρίπτεται.

2. Να γραφεί πρόγραμμα που να διαβάζει ένα αριθμό και να αποφαίνεται αν είναι άρτιος ή περιττός

.

3. Να δημιουργηθεί ιστοσελίδα που να  δέχεται από φόρμα έναν αριθμό και αν είναι ο 1 να γράφει: "Ανοιξη", αν είναι ο 2 να γράφει: "Καλοκαίρι", αν είναι ο 3 να γράφει ΄:"Φθινόπωρο", αν είναι ο 4 να γράφει: "Χειμώνας", αλλιώς "Λάθος Αριθμός". 

4. Μια εταιρεία κινητής τηλεφωνίας ακολουθεί ανά μήνα την πολιτική τιμών που φαίνεται στον παρακάτω πίνακα:

Πάγιο 7€
Χρόνος τηλεφωνημάτων (δευτερόλεπτα)	Χρονοχρέωση    (€/δευτερόλεπτο)
1-500	.02
501-800	0,01
801 και άνω	0,001

α)  Να εισάγεται μέσω φόρμας η χρονική διάρκεια των τηλεφωνημάτων ενός συνδρομητή σε διάστημα ενός μήνα.
β)  να υπολογίζεται  η μηνιαία χρέωση του συνδρομητή
γ)  να εμφανίζει  τη μηνιαία χρέωση του συνδρομητή.

5.  Μια εταιρεία κινητής τηλεφωνίας ακολουθεί ανά μήνα την πολιτική τιμών που φαίνεται στον παρακάτω πίνακα:

Πάγιο 7€
Χρόνος τηλεφωνημάτων (δευτερόλεπτα)	Χρονοχρέωση    (€/δευτερόλεπτο)
1-500	.02
501-800	0,01
801 και άνω	0,001

α)  Να εισάγεται μέσω φόρμας η χρονική διάρκεια των τηλεφωνημάτων ενός συνδρομητή σε διάστημα ενός μήνα.
β)  να υπολογίζεται  η μηνιαία χρέωση του συνδρομητή
γ)  να εμφανίζει  τη μηνιαία χρέωση του συνδρομητή 

6) Να εισάγεται μέσω φόρμας το Κεφάλαιο μιας κατάθεσης. Αν αυτό είναι μεγαλύτερο από 20000 Ευρώ, να παίρνει επιτόκιο 1% αλλιώς 0.5%. Να εμφανίζεται το Κεφάλαιο, ο Τόκος (=Κεφάλαιο * Επιτόκιο) και το τελικό ποσό (=Κεφάλαιο + Τόκος).
7) Να εισάγονται μέσω φόρμας ο μέσος όρος και οι απουσίες ενός μαθητή.
Αν ο μέσος όρος είναι πάνω από 9,5 και οι απουσίες κάτω από 114 να βγαίνει το μήνυμα "Προάγεται", αλλιώς "Απορρίπτεται".

Δομή πολλαπλών Επιλογών στη javascript (if... elseif...else)

Τι γίνεται όταν το πρόγραμμα παίρνει άλλη τροπή αναλόγως αν ισχύουν πολλές διαφορετικές συνθήκες και όχι μόνο δύο;
Για παράδειγμα, έστω ότι αν ο βαθμός είναι κάτω από 9,5 πρέπει  να βγαίνει μήνυμα: "Απορρίπτεται". Αν είναι μικρότερος του 15, να βγαίνει μήνυμα: "Αρκετά καλά" και αν είναι μεγαλύτερος του 15 να βγαίνει μήνυμα : "Άριστα!".
Ο Κώδικας δίνεται παρακάτω:
<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<!-- Δήλωση μεταβλητών-->
<script>
var bathmos = 12;

if (bathmos<=9.5 ) {
document.getElementById("demo").innerHTML =
" Απορρίπτεται!"  ;

} else if ( bathmos<13) {


document.getElementById("demo").innerHTML =
"Αρκετά καλά!"  ;
}else {


document.getElementById("demo").innerHTML =
"'Αριστα!"  ;}

</script>

</body>
 </html>

Ασκήσεις

1. Προσθέστε κώδικα στο παραπάνω πρόγραμμα, ώστε  αν δίνει ο χρήστης βαθμό μεγαλύτερο από 20 ή μικρότερο από 0 να βγαίνει μήνυμα λάθους.

2. Να εκχωρείται σε μία μεταβλητή ένας αριθμός από 1 ως 4 και αν είναι εκτός ορίων να βγαίνει μήνυμα. Να βγαίνει το όνομα της εποχής που αντιστοιχεί σε αυτό τον αριθμό. Π.χ. 1- Άνοιξη, 2- Καλοκαίρι, κ.ο.κ.

3. Ένα παρκινγκ χρεώνει τη στάθμευση ανά ώρα όπως φαίνεται στον πίνακα:

ΩΡΕΣ ΣΤΑΘΜΕΥΣΗΣ	ΧΡΕΩΣΗ ΑΝΑ ΩΡΑ ΣΕ €
ΜΕΧΡΙ ΚΑΙ 4 ΩΡΕΣ	7
ΠΕΡΙΣΣΟΤΕΡΕΣ ΑΠΟ 4 ΜΕΧΡΙ ΚΑΙ 8	6
ΠΕΡΙΣΣΟΤΕΡΕΣ ΑΠΟ 8	5

Ωστόσο, αν πρόκειται για πελάτη με προνομιακή κάρτα, υπάρχει έκπτωση 15%.

Να γραφεί πρόγραμμα που :

-          Εκχωρεί σε μια μεταβλητή τις ώρες στάθμευσης και θα χρεώνει ανάλογα, εμφανίζοντας το αποτέλεσμα

-          Θα εκχωρεί σε μια μεταβλητή την τιμή "ΝΑΙ" αν ο πελάτης έχει προνομιακή κάρτα. Αν έχει, θα εφαρμόζει έκπτωση 15% και θα εμφανίζει την τελική  χρέωση και το ποσό της έκπτωσης

3. Μια εταιρεία κινητής τηλεφωνίας ακολουθεί ανά μήνα την πολιτική τιμών που φαίνεται στον παρακάτω πίνακα:

Πάγιο 7€
Χρόνος τηλεφωνημάτων (δευτερόλεπτα)	Χρονοχρέωση    (€/δευτερόλεπτο)
1-500	.02
501-800	0,01
801 και άνω	0,001

α)  Να εκχωρείται σε μια μεταβλητή η χρονική διάρκεια των τηλεφωνημάτων ενός συνδρομητή σε διάστημα ενός μήνα.
β)  να υπολογίζεται  η μηνιαία χρέωση του συνδρομητή
γ)  να εμφανίζει (τυπώνει) τη λέξη «ΧΡΕΩΣΗ» και τη μηνιαία χρέωση του συνδρομητή 

Λογικοί τελεστες (ΚΑΙ, Ή, ΌΧΙ) στο JavaScript

Υπάρχει περίπτωση να πρέπει να γίνει κάτι σε ένα πρόγραμμα όταν ισχύουν δύο ή και περισσότερες συνθήκες. Παράδειγμα, ο μαθητής περνάει την τάξη, αν ο μέσος όρος του είναι μεγαλύτερος από 9.5 και οι απουσίες του μικρότερες ή ίσες από 114.
Ο κώδικας δίνεται παρακάτω:
<!DOCTYPE html>
<html>
<body>
 <meta charset="UTF-8">
<p id="demo"></p>

<!-- Δήλωση μεταβλητών-->
<script>
var bathmos = 15;
var apousies= 110



if (bathmos>=9.5 && apousies<=114) {


document.getElementById("demo").innerHTML =
"Προάγεται!"  ;
} else {


document.getElementById("demo").innerHTML =
"Απορρίπτεται!"  ;
}


</script>
</body>
 </html>

Προσέξτε ότι ο μαθητής προάγεται μόνο όταν ισχύουν και (&&) οι δύο συνθήκες. Έστω και μία αν δεν ισχύει, απορρίπτεται.
Οι συγκριτικοί τελεστές στη Javascript φαίνονται παρακάτω:

==	ίσον με
===	ίδια τιμή και τύπος μεταβλητής
!=	όχι ίσο
!==	όχι ίδια τιμή, ή τύπος μεταβλητής
>	μεγαλύτερο
<	μικρότερο
>=	μεγαλύτερο ή ίσο
<=	μικρότερο ή ίσο

Οι λογικοί τελεστές είναι:

&&	ΚΑΙ
||	Ή
!	ΟΧΙ

Ασκήσεις

1. Να αλλάξετε την παραπάνω άσκηση ώστε να απορρίπτεται ο μαθητής αν οι απουσίες είναι περισσότερες από 114 ή ο μέσος όρος μικρότερος από 9.5

2. Να βγαίνει μια ερώτηση, για παράδειγμα: "Η Ελλάδα πήρε το Πανευρωπαϊκό στο ποδόσφαιρο το 2004; (Ναι/Όχι)" Η απάντηση  θα εκχωρείται σε μια μεταβλητή κι αν είναι "ΝΑΙ", ή "ναι", ή "Ναι", ή "nai', ή "ΝΑΙ" (με λατινικά), να βγαίνει μήνυμα :"Σωστά", αλλιώς: "Η απάντηση είναι Ναι!"

3. Να βγαίνει μήνυμα "Δώσε κωδικό πρόσβασης" και αν αυτός είναι "aer1080um3n0", να βγάζει μήνυμα: " Καλώς ήρθατε!", αλλιώς: "Λάθος Κωδικός!"

4. Βάζοντας διάφορες τιμές στο χ, βρείτε τη λύση της εξίσωσης , προσέχοντας όμως τις τιμές μη γίνει αυτή αδύνατη (διαίρεση με 0).
5. Ένα έτος είναι δίσεκτο αν ο αριθμός του είναι πολλαπλάσιο του 4, αλλά όχι του 100, εκτός αν είναι πολλαπλάσιο του 400.Να γραφεί πρόγραμμα που να εκχωρείται ένα έτος σε μία μεταβλητή και να αποφαίνεται αν είναι δίσεκτο.

Δομή Επιλογής (if) στο Javascript

Υπάρχει περίπτωση η απόκριση του προγράμματος να είναι τελείως διαφορετική, αναλόγως αν ισχύει ή όχι μία συνθήκη.
Για παράδειγμα, αν ο βαθμός είναι μεγαλύτερος από 9.5 ο μαθητής προάγεται. Αλλιώς απορρίπτεται.

Ο κώδικας δίνεται παρακάτω:
<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<!-- Δήλωση μεταβλητών-->
<script>
var bathmos = 15;


<!-- Σύκγριση βαθμού με το 9.5-->
if (bathmos>=9.5) {

  <!-- Εμφάνιση αποτελέσματος στην οθόνη αν ισχύει >=9.5 -->
document.getElementById("demo").innerHTML =
"Προάγεται!"  ;
} else {

 <!-- Εμφάνιση αποτελέσματος στην οθόνη αν ισχύει >=9.5 -->
document.getElementById("demo").innerHTML =
"Απορρίπτεται!"  ;
}

</script>
 </BODY>
 </HTML>

Δοκιμάστε να δώσετε ένα βαθμό κάτω από τη βάση και ελέγξτε το αποτέλεσμα.

Ασκήσεις

1. Να εκχωρείτε σε μεταβλητές x,y δύο αριθμούς και να βγαίνει με μήνυμα μήνυμα ο μεγαλύτερος αριθμός.

2. Να γράψετε javascript που θα εκχωρεί ένα αριθμό σε μία μεταβλητή και θα εμφανίζει αν είναι άρτιος ή περιττός. (το υπόλοιπο της διαίρεσης δίνεται από το %. Π.χ. 7%4=3).

3. Οι  βαθμοί σε κάποιες εξετάσεις είναι 0-100. Διορθώνουν τρεις βαθμολογητές. Ο τελικός βαθμός είναι ο μέσος όρος των 2 πρώτων βαθμολογητών. Αν,όμως, προκύψει διαφορά μεγαλύτερη των 11 μορίων στους βαθμούς των δύο πρώτων βαθμολογητών, τότε ο τελικός βαθμός είναι ο μέσος όρος των τριών βαθμών. Να γραφεί πρόγραμμα σε javascript που θα εκχωρεί το ονοματεπώνυμο του μαθητή σε μια μεταβλητή, τους βαθμούς των τριών βαθμολογητών σε τρεις άλλες και θα εμφανίζει το ονοματεπώνυμο και   τον τελικό βαθμό.

4. Να εκχωρείται σε μεταβλητή το εισόδημα ενός φορολογούμενου και αν αυτό υπερβαίνει τα 20000 Ευρώ, να έχει φόρο 30%. Αλλιώς θα έχει φόρο 22%. Να εμφανίζεται το εισόδημα, ο φόρος και το  καθαρό ποσό που μένει στο φορολογούμενο.

 

Εργασία στο Javascript

Το κλασικό παιχνίδι «Πέτρα-Ψαλίδι-Χαρτί» παίζεται με δύο παίκτες.

 Σε κάθε γύρο του παιχνιδιού, ο κάθε παίκτης επιλέγει ένα από τα ΠΕΤΡΑ, ΨΑΛΙΔΙ, ΧΑΡΤΙ, και παρουσιάζει την επιλογή του ταυτόχρονα με τον αντίπαλό του.

Η ΠΕΤΡΑ κερδίζει το ΨΑΛΙΔΙ, το ΨΑΛΙΔΙ το ΧΑΡΤΙ και το ΧΑΡΤΙ την ΠΕΤΡΑ.

Σε περίπτωση που οι δύο παίκτες έχουν την ίδια επιλογή, ο γύρος λήγει ισόπαλος.

 Να αναπτύξετε πρόγραμμα που:

1.  Διαβάζει μέσω φόρμας τα ονόματα των δύο παικτών και τις επιλογές τους (ΠΕΤΡΑ, ΨΑΛΙΔΙ, ή ΧΑΡΤΙ). Αν είναι διαφορετική λέξη, θα βγαίνει κατάλληλο μήνυμα.

 2. Συγκρίνει τις επιλογές των παικτών και διαπιστώνει το νικητή του γύρου ή την ισοπαλία και βγάζει κατάλληλο μήνυμα.

 3. Εμφανίζει το όνομα του νικητή ή, αν δεν υπάρχει νικητής, το μήνυμα «ΤΟ ΠΑΙΧΝΙΔΙ ΕΛΗΞΕ ΙΣΟΠΑΛΟ».

Για να μη βλέπει ο ένας χρήστης τι βάζει ο άλλος, βρείτε τον τρόπο όταν πληκτρολογούν την επιλογή τους να βγαίνουν τελείες και όχι γράμματα (κάντε αναζήτηση για HTML form password dots)

Javascript - μεταβλητές - πράξεις

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

Με τη Javascript μπορούμε να κάνουμε και προγραμματισμό στην ιστοσελίδα, αφού είναι μία γλώσσα προγραμματισμού για ιστοσελίδες.

Ας πάρουμε το παράδειγμα ενός μαγαζιού που πουλάει πουκάμισα, παντελόνια και μπουφάν.
Θέλουμε να εκχωρήσουμε τις τιμές του κάθε προϊόντος σε μεταβλητές (π.χ. pa για πανταλόνι, m για μπουφάν και pou για πουκάμισο.)

Στη συνέχεια, θέλουμε να εφαρμόσουμε ΦΠΑ 24% στις πιο πάνω τιμές, ώστε να βρεθεί η τελική τιμή των προϊόντων.

Καταρχήν, δηλώνονται οι μεταβλητές όπως παρακάτω:

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<!-- Δήλωση μεταβλητών-->
<script>
var pa = 50;
var pou= 30;
var m= 60;

<!-- Υπολογισμός τελικής τιμής παντελονιών-->
var pafinal= pa+pa*0.24

<!-- Εμφάνιση αποτελέσματος στην οθόνη -->
document.getElementById("demo").innerHTML =
"Τελική τιμή παντελονιών " + pafinal ;
</script>


</body>
</html>


Παρατηρήστε ότι η Javascript βγάζει μηνύματα χρησιμοποιώντας τη συνάρτηση:
document.getElementById("demo").innerHTML =
"Τελική τιμή παντελονιών " + pafinal ;

Όπως ίσως προσέξατε, πριν το <script> ορίστηκε μία παράγραφος με id="demo", η οποία είναι κενή, δεν έχει μέσα περιεχόμενο.

Η συνάρτηση getElementById("demo"),  ψάχνει να βρει ποιο στοιχείο της HTML έχει id="demo" και αλλάζει το περιεχόμενό του (innerHTML) σε: "Τελική τιμή παντελονιών " + pafinal  έχει υπολογιστεί παραπάνω και είναι η τελική τιμή του παντελονιού συν ΦΠΑ 24%

όπου pafinal = pa+pa*24 

Τα σύμβολα των πράξεων στη Javascript Είναι:     +, - , * , / ,** (ύψωση σε δύναμη), % υπόλοιπο διαίρεσης.

Παράδειγμα :  Το 2³ γίνεται :2**3 και 5%2 =1

Ασκήσεις

1. Φτιάξτε ένα πρόγραμμα που να έχει μία αρχική τιμή ενός προϊόντος και να κάνει έκπτωση 30%.
Να εμφανίζει στην ιστοσελίδα την αρχική τιμή, το ποσό της έκπτωσης και την τελική τιμή, με κατάλληλα μηνύματα.

2. Φτιάξτε ένα πρόγραμμα που θα έχει ένα προφορικό βαθμό κι ένα γραπτό. Ο τελικός βαθμός θα προκύπτει από το 30% του προφορικού και το  70% του γραπτού. Να εμφανίζονται με κατάλληλα μηνύματα οι αρχικοί βαθμοί, οι προσαρμοσμένοι βαθμοί και ο τελικός βαθμός.

Επαναληπτικές ασκήσεις HTML

1.Να κατασκευαστεί  ιστοσελίδα που θα έχει τίτλο το όνομα της αγαπημένης σου ομάδας ποδοσφαίρου. (2 μονάδες)

Μέσα στη σελίδα να φαίνεται η φωτογραφία με το σύμβολο της ομάδας.

Να φαίνεται ο σύνδεσμος που θα πηγαίνει το χρήστη στην ιστοσελίδα της ομάδας μόλις πατήσει πάνω του. (3μονάδες)

Από κάτω αντιγράψτε από το διαδίκτυο  την ιστορία της ομάδας και όπου χρειάζεται έμφαση  χρησιμοποιείστε έντονα, πλάγια και υπογραμμισμένα γράμματα.  

Να κάνετε μία μη αριθμημένη λίστα (unordered list) με τρεις χρονιές που πήρε κύπελλο ή πρωτάθλημα η ομάδα. (4)

Βρείτε και αντιγράψτε από το διαδίκτυο ένα widget  για τα πρωτοσέλιδα των αθλητικών εφημερίδων.  

2. Να φτιάξεις ένα ιστοτόπο  που θα έχει τίτλο: " Είδη video games" (2 μονάδες)

Από κάτω μία εικόνα από ένα video game. (3 μονάδες)

Απο κάτω ένα σύνδεσμο που θα οδηγεί το χρήστη μόλις πατήσει πάνω του στο www.games.gr (3 μονάδες)

Από κάτω μία  αριθμημένη λίστα ως εξής: (9 μονάδες)

1. First person shooters

2. Παιχνίδια στρατηγικής

3. Παιχνίδια εξομοίωσης

4. Παιχνίδια περιπέτειας

5. Παιχνίδια υπόδησης ρόλων

Βρες στο διαδίκτυο ένα games  widgets για website και βάλε ένα παιχνίδι στον ιστοτόπο σου. (3 μονάδες)

3.Να δημιουργηθεί ένας ιστοτόπος με τίτλο "Είδη ρομπότ" (2 μονάδες)

Να μπει με στυλ Επικεφαλίδας 1  και χρώμα φόντου κόκκινο "Είδη ρομπότ" (3 μονάδες)

Να έχει ένα πίνακα που η πρώτη γραμμή να  συγχωνεύει τρία κελιά και να  γράφει" Είδη Ρομπότ". Η Δεύτερη γραμμή να  έχει το κάθε κελί  το είδος του ρομπότ και στην  τρίτη γραμμή στο κελί κάτω από το όνομα, τη φωτογραφία του αντίστοιχου ρομπότ (μέχρι 3 είδη ρομπότ) (9 μονάδες)

Να μπει σύνδεσμος ως εξής:

Βρείτε πληροφορίες  εδώ . Και μόλις ο χρήστης πατήσει στο "εδώ", να πηγαίνει στον ιστοτόπο με τις πληροφορίες. (3 μονάδες)

Βάλε μια εικόνα background με ένα ρομπότ. (3 μονάδες)

4. Κάνε μια ιστοσελίδα με τίτλο "Συνταγές" (2 μονάδες)

Διάλεξε μια συνταγή και βάλε το όνομά της (π.χ. σοκολατόπιτα)  με στυλ Επικεφαλίδας 1 (2 μονάδες)

Βάλε εικόνα της συνταγής ( 3 μονάδες)

Βάλε μία μη αριθμημένη λίστα (unordered list) με τα υλικά: (8 μονάδες)

Παράδειγμα

·         Αυγά

·         Ζάχαρη

·         Κακάο

κλπ...

Βάλε background color στην ιστοσελίδα μπλε (3 μονάδες)

Βάλε ένα σύνδεσμο που θα παραπέμπει στην ιστοσελίδα που βρήκες τη συνταγή (2 μονάδες)

  5. Να δημιουργηθεί ιστοσελίδα με τίτλο 1ο ΕΠΑΛ Διονύσου "Ζήνων" (2 μονάδες)

Με στυλ επικεφαλίδας 2 και χρώμα κίτρινο να γράφει " ΤΟΜΕΙΣ του ΕΠΑΛ" (2 μονάδες)

Να  έχει background image φωτογραφία του ΕΠΑΛ (4 μονάδες)

Να δημιουργηθεί πίνακας με δύο στήλες. Η  Πρώτη στήλη συγχωνεύει  5 γραμμές

και γράφει "Τομείς". Η Δεύτερη στήλη έχει 5 γραμμές και καθένα κελί έχει από ένα τομέα : (8 μονάδες)

Τομείς	Πληροφορικής
	Οικονομίας-Διοίκησης
	Υγείας Πρόνοιας  Ευεξίας
	Μηχανολογίας
	Ηλεκτρολογίας

Να μπει ο σύνδεσμος που οδηγεί στον ιστοτόπο του ΕΠΑΛ ως εξής:

Βρείτε τον ιστοτόπο του ΕΠΑΛ Διονύσου εδώ

Μόλις ο χρήστης πατάει στο "εδώ" να πηγαίνει στον ιστοτόπο του ΕΠΑΛ.(4 μονάδες).

 6. Να δημιουργηθεί μία ιστοσελίδα  με τίτλο " 1ο ΕΠΑΛ Διονύσου "ΖΗΝΩΝ" (2 μονάδες)

Να μπει με στυλ επικεφαλίδας 2  και χρώμα φόντου κόκκινο "Εγγραφές" (2 μονάδες)

 Μία εικόνα του ΕΠΑΛ (2 μονάδες)

Μέσα να έχει μία φόρμα  (form) που θα ζητάει το όνομα ,το επίθετο  και το πατρώνυμο του μαθητή και θα υπάρχει ένα κουμπί από κάτω που θα γράφει "Εγγραφή". (5 μονάδες)

Παρακάτω η φόρμα θα έχει  μία drop-down list που θα περιέχει όλους τους τομείς του ΕΠΑΛ (ηλεκτρολογίας, μηχανολογίας, πληροφορικής, Υγείας)  κι ένα κουμπί που θα γράφει "Επιλογή τομέα" (6 μονάδες)

Να μπει ο σύνδεσμος που οδηγεί στον ιστοτόπο του ΕΠΑΛ ως εξής:                         

Βρείτε τον ιστοτόπο του ΕΠΑΛ Διονύσου εδώ

Μόλις ο χρήστης πατάει στο "εδώ" να πηγαίνει στον ιστοτόπο του ΕΠΑΛ.(3 μονάδες).