Javascript

Πρόκειτε για μία από τις 3 σημαντικότερες γλώσσες για την ανάπτυξη ιστοσελίδων:

  • HTML καθορίζει τι θα περιλαμβάνει η ιστοσελίδα,
  • CSS καθορίζει την αισθητική (μορφοποίηση) των ιστοσελίδων
  • JavaScript μετετρέπει τις ιστοσελίδες από στατικές σε δυναμικές

Οι εντολές της JavaScript πρέπει να βρίσκονται μέσα στις ετικέτες   και , οι οποίες με την σειρά τους μπορούν να μπουν στο τμήμα <head> ή <body> ή και στα δύο. Εναλλακτικά μπορεί να μπει και σε εξωτερικό αρχείο, το οποίο θα πρέπει να έχει την κατάληξη .js (π.χ. fileWithScripts.js). Σε αυτή την περίπτωση θα πρέπει είτε στο head ή στο body να βάλουμε μια αναφορά για το που βρίσκεται αυτό το αρχείο.

<!DOCTYPE html>
<html>
<body>
http://fileWithScript.js
</body>
</html>

Γενικές παρατηρήσεις

  • Κάθε εντολή έχει στο τέλος ; (προαιρετικό). Μπορούμε να έχουμε πολλές εντολές στην ίδια γραμμή αρκεί να παρεμβάλεται ; ανάμεσα τους. Παράδειγμα : a = 1; b = 2; s = a + b
  • Για σχόλια μιας γραμμής πληκτρολογούμε στην αρχή το σύμβολο // . Για περισσότερες γραμμές πληκτρολογούμε  /* στην αρχή της πρώτης γραμμής και */ στο τέλος της τελευταίας.
  • Γίνεται διάκριση πεζών και κεφαλαίων. Οι μεταβλητές myage και MyAge διαφέρουν.
  • Πολλά διαδοχικά κενά αντιμετωπίζονται από την  Javascript ως ένα. Τα πολλά κενά μπορούν να κάνουν τον κώδικα πιο ευανάγνωστο για εμάς.
  • Για την ομαδοποίηση εντολών χρησιμοποιούνται άγκιστρα { }.
  • Για κείμενο χρησιμοποιούνται  μονά ή διπλά εισαγωγικά.

Μεταβλητές

Τα ονόματα (μεταβλητών, συναρτήσεων, κλπ) πρέπει να αρχίζουν με γράμμα ή κάτω πάυλα ή $. Μία μεταβλητή που θέλουμε να περιλαμβάνει περισσότερες από μία λέξεις θα πρέπει να γράφεται χωρίς κενά και το πρώτο γράμμα κάθε λέξεις να γράφεται με κεφαλαία γράμματα π.χ. toOnoma ή ToOnoma.

Η δήλωση μεταβλητών γίνεται με την λέξη var. Η εκχώρηση τιμών με το =.

var x;
x = 6;

ή εναλλακτικά

var x = 6, y="Μαρία";

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

  • Με την χρήση του alert box του λειτουργικού συστήματος : window.alert(“Εδώ γράφουμε οτι θέλουμε να προβάλουμε”). Πρέπει ο χρήστης να πατήσει ΟΚ για να προχωρήσει. Δείτε παράδειγμα.
  • Γράφοντας  document.write(“Εδώ γράφουμε οτι θέλουμε να προβάλουμε”). Το αποτέλεσμα εμφανίζεται μέσα στην ιστοσελίδα. Δείτε παράδειγμα.  Προσοχή, αν εκτελεστεί αφού η ιστοσελίδα έχει εμφανιστεί τότε τα περιεχόμενα της θα διαγραφούν. Δείτε παράδειγμα.
  • Μεταφέροντας τα αποτελέσματα μέσα σε ένα HTML element με την χρήση της εντολής innerHTML. Δείτε παράδειγμα.
  • Εμφανίζοντας τα αποτελέσματα στην κοσνόλα του προγράμματος περιήγησης (Chrome, Firefox, κλπ) με την εντολή console.log(). Δείτε παράδειγμα.

Τελεστές

  • Αριθμητικοί: + , , * , / , % (υπόλοιπο διαίρεσης δηλ το mod), ++,
  • Εκχώρησης : += , -= , *= , /= , %= . (Παράδειγμα: x+=y είναι το ίδιο με x=x+y)
  • Συγκρητικοί και Λογικοί: ==, === (ίδια τιμή και ίδιος τύπος), !=, !== (διαφορετική τιμή ή διαφορετικός τύπος), >,>=,<,<=, ?

 

 Συναρτήσεις

Η γενική τους μορφή είναι:

function όνομα (παράμετρος1, παράμετρος2, παράμετρος3) {
    εντολές
}

Ασκήσεις

  1. Πολλαπλασιασμός και Διαίρεση δύο αριθμών
    Φτιάξτε προγραμμα σε javascript που να διαβάζει δύο αριθμητικές τιμές και να υπολογίζει το γινόμενο και την διαίρεση τους.
    Εμφάνιση Λύσης

     

    <!DOCTYPE html>  
    <html>   
    <head>  
    <meta charset=utf-8 />  
    <title>Άσκηση 1 Πολλαπλασιασμός - Διαίρεση</title>  
     
    </head>  
    <body>  
    <form>  
    1ος Αριθμός: <input type="text" id="protosArithmos" /><br>  <br>  
    2ος Αριθμός: <input type="text" id="deuterosArithmos" /><br>  <br>  
    <input type="button" onClick="ginomeno()" Value="Πολλαπλασιασμός" />  
    <input type="button" onClick="diairesi()" Value="Διαίρεση" />  
    <p>Aποτέλεσμα : <input type="text" id="apotelesma" /></p>
    </form> 
    
    
    function ginomeno()  
    {  
            x = document.getElementById("protosArithmos").value;  
            y = document.getElementById("deuterosArithmos").value;  
            document.getElementById("apotelesma").value = x * y;  
    }  
      
    function diairesi()   
    {   
            x = document.getElementById("protosArithmos").value;  
            y = document.getElementById("deuterosArithmos").value;  
    	document.getElementById("apotelesma").value = x / y;  
    } 
    
    </body>  
    </html>

    Κατεβάστε το αρχείο HTML

  2. Μετατροπή Κελσίου σε Φαρενάιτ
    Φτιάξτε προγραμμα σε javascript που να διαβάζει μία θερμοκρασία Κελσίου και να την μετατρέπει σε Φαρενάιτ και το αντίστροφο. Δίνεται ο τύπος: F=C*9/5+32.
    Εμφάνιση Λύσης

     

    <!DOCTYPE html>  
    <html>   
    <head>  
    <meta charset=utf-8 />  
    <title>Άσκηση 2 <b>Μετατροπή Κελσίου σε Φαρενάιτ</b></title>  
     
    </head>  
    <body>  
    <form>  
    Θερμοκρασία Κελσίου: <input type="text" id="kelsiou" /><br>  <br>  
    <input type="button" onClick="KelSeFar()" Value="Μετατροπή σε Φαρενάιτ" />  
    <input type="button" onClick="FarSeKel()" Value="Μετατροπή σε Κελσίου" /> <br ></br>
    Θερμοκρασία Φαρενάιτ: <input type="text" id="faren" /><br>  <br>
    </form> 
    
    
    function KelSeFar()  
    {  
            x = document.getElementById("kelsiou").value;  
            document.getElementById("faren").value = x * 9/5+32;  
    }  
      
    function FarSeKel()   
    {   
            y = document.getElementById("faren").value;   
    	document.getElementById("kelsiou").value = (y-32)*5/9;  
    } 
    
    </body>  
    </html>

    Κατεβάστε το αρχείο HTML

  3. Δίσεκτο έτος
    Φτιάξτε προγραμμα σε javascript που να διαβάζει ένα έτος και να μας λέει αν είναι δίσεκτο ή οχι. Δίσεκτα είναι τα έτη που διαιρούνται με το 4 και όχι με το 100 καθώς και όσα διαιρούνται με το 400.
    Εμφάνιση Λύσης

     

    <!DOCTYPE html>  
    <html>   
    <head>  
    <meta charset=utf-8 />  
    <title>Άσκηση 2 <b>Είναι δίσεκτο έτος;</b></title>  
     
    </head>  
    <body>  
    <form>  
    Πληκτρολογήστε το έτος: <input type="text" id="etos" /><br>  <br>  
    <input type="button" onClick="leapYear()" Value="Είναι Δίσεκτο;" /> <br ></br>
    Αποτέλεσμα: <input type="text" id="apotelesma" /><br>  <br>
    </form> 
    
    
    
    
    function leapYear()
    {
    year = parseInt(document.getElementById("etos").value);
      if (((year % 4 == 0) u0026amp;u0026amp; (year % 100 != 0)) || (year % 400 == 0)){
          document.getElementById("apotelesma").value ="Ναι είναι!"
        }
        else{
          document.getElementById("apotelesma").value ="Όχι δεν είναι!"
        }
    }
    
    </body>  
    </html>

    Κατεβάστε το αρχείο HTML

  4. Έλεγχος εγκυρότητας
    Φτιάξτε προγραμμα που που να διαβάζει έναν αριθμό μεταξύ 1 και 100 και να μας λέει αν είναι έγκυρος ή οχι.
    Εμφάνιση Λύσης

     

    <!DOCTYPE html>  
    <html>   
    <head>  
    <meta charset=utf-8 />  
    <title>Άσκηση 4- Έλεγχος εγκυρότητας</title>  
     
    </head>  
    <body>  
    
    <p>Πληκτρολογήστε ένα αριθμό μεταξύ 1 και 100:</p>
    
    <input id="arithmos">
    
    <button type="button" onclick="myFunction()">Κάνε έλεγχο!</button>
    
    <p id="apotelesma"></p>
    
    
    function myFunction() {
        var x, text;
    
        // Get the value of the input field with id="numb"
        x = document.getElementById("arithmos").value;
    
        // If x is Not a Number or less than one or greater than 10
        if (isNaN(x) || x  10) {
            text = "Δέν είναι έγκυρος";
        } else {
            text = "ΟΚ!";
        }
        document.getElementById("apotelesma").innerHTML = text;
    }
    
    
    </body>
    </html> 
    
    

    Κατεβάστε το αρχείο HTML

  5. Παραγωγή τυχαίου αριθμού μεταξύ 0 και 5.
    Φτιάξτε προγραμμα που που να εμφανίζει τυχαίο αριθμό μεταξύ 0 και 5.
    Εμφάνιση Λύσης
    Κατεβάστε το αρχείο HTML

     

    <!DOCTYPE html>  
    <html>   
    <head>  
    <meta charset=utf-8 />  
    <title>Άσκηση 4- Έλεγχος εγκυρότητας</title>  
     
    </head>  
    <body>  
    
    <p>Εμφάνιση τυχαίου αριθμού μεταξύ 0 και 5.</p>
    
    <button onclick="myFunction()">Πατήστε εδώ!</button>
    
    <p id="demo"></p>
    
    
    function myFunction() {
        document.getElementById("demo").innerHTML =
        Math.floor(Math.random() * 6);
    }
    
    
    </body>
    </html>


  6. Παραγωγή τυχαίου αριθμού μεταξύ δύο ακέραιων αριθμών
    Φτιάξτε προγραμμα που που να δέχεται δύο ακέραιους αριθμούς και να εμφανίζει τυχαίο αριθμό μεταξύ τους.
    Εμφάνιση Λύσης
    Κατεβάστε το αρχείο HTML

     

    <!DOCTYPE html>  
    <html>   
    <head>  
    <meta charset=utf-8 />  
    <title>Άσκηση 4- Έλεγχος εγκυρότητας</title>  
     
    </head>  
    <body>  
    
    <p>Εμφάνιση τυχαίου αριθμού μεταξύ δύο ακεραίων.</p>
    <input id="a">
    <input id="b"><br>
    <button onclick="myFunction()">Πατήστε εδώ!</button>
    
    <p id="demo"></p>
    
    
    function myFunction() {
    x = parseInt(document.getElementById("a").value);
    y = parseInt(document.getElementById("b").value);
        document.getElementById("demo").innerHTML =    Math.floor(Math.random() * (y+1-x))+x;
    }
    
    
    </body>
    </html>
    
  7. Ταξινόμηση Φυσαλίδα
    Ταξινόμηση με την μέθοδο της Φυσαλίδας.
    Εμφάνιση Λύσης
    Κατεβάστε το αρχείο HTML

     

    <!DOCTYPE html>  
    <html>   
    <head>  
    <meta charset=utf-8 />  
    <title>Άσκηση 4- Έλεγχος εγκυρότητας</title>  
     
    </head>  
    <body>  
    
    <p>Ταξινόμηση με φυσαλλίδα: [12, 345, 4, 546, 122, 84, 98, 64, 9, 1, 3223, 455, 23, 234, 213].</p>
    
    <br>
    <button onclick="numberSort([12, 345, 4, 546, 122, 84, 98, 64, 9, 1, 3223, 455, 23, 234, 213])">Πατήστε εδώ!</button>
    
    <p id="demo"></p>
    
    
    
    
    function numberSort(input){
    	for (var i = 0; i 
    
    </body>
    </html>


  8. xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    Εμφάνιση Λύσης
    Κατεβάστε το αρχείο HTML

 

http://www.sislands.com/coin70/examples.htm