Javascript – Μάριος Αγγελίδης

Τι είναι η Javascript;

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

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

Που μπάινει

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

Σε περίπτωση που έχουμε πολλά και μεγάλα εξωτερικά αρχεία, ενδέχεται να καθυστερήσει η φόρτωση της σελίδας. Το πρόβλημα αντιμετψπίζεται αν η javascript μπεί λίγο πριν από το </body>.

				
					<html>
<body>
    <script>
        alert( 'Hello, world!' );
    </script>
    <script src='./fileWithScript.js'></script>
</body>
</html>

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

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

Μεταβλητές

Τα ονόματα (μεταβλητών, συναρτήσεων, κλπ) πρέπει να περιλαμβάνουν γράμματα, ψηφία, κάτω πάυλα ή $. Δεν επιτρέπεται να ξεκινούν με ψηφίο. Τέλος, δεν επιτρέπεται η χρήση μεταβλητών με ονόματα που χρησιμοποιεί η javascript (λέγονται δευσμευμένες λέξεις) όπως π.χ. if, let, return. Δείτε την λίστα με τις δεσμευμένες λέξεις πατώντας εδώ.
Μία μεταβλητή που θέλουμε να περιλαμβάνει περισσότερες από μία λέξεις θα πρέπει να γράφεται χωρίς κενά και το πρώτο γράμμα κάθε λέξεις να γράφεται με κεφαλαία γράμματα π.χ. toOnoma ή ToOnoma.
Η δήλωση μεταβλητών γίνεται με την λέξη let και μια μόνο φορά. Δεν χρειάζεται να δηλωθεί ο τύπος μιας μεταβλητής. Η εκχώρηση τιμών γίνεται με το =. Αν αντί για let γράψουμε const τότε η μεταβλητή παίρνει μια τιμή αλλά αυτή δεν μπορεί να αλλάξει. Σε αυτή την περίπτωση ονομάζεται σταθερή. Χρησιμοποιούμε const όταν έχουμε Πίνακες ή Αντικείμενα.
Γίνεται διάκριση πεζών και κεφαλαίων. Οι μεταβλητές myage και MyAge διαφέρουν.

Υπάρχουν 8 τύποι δεδομένων

Επτά primitive (χρησιμοποιούνται για αποθήκευση ενός δεδομένου) τύποι δεδομένων:

Number (Ακέραιοι και δεκαδικοί) στο διάστημα [-9007199254740991, 9007199254740991]. Υπάρχουν 3 ιδιαίτεροι αριθμοί : Infinity (∞), -Infinity (-∞) και NaN (αποτέλεσμα μιας πράξης που δεν ορίζεται π.χ. “α”/2). Επιτρέπεται η χρήση του συμβόλου της κάτω παύλας (_) ώστε οι αριθμοί να είναι πιο ευανάγνωστοι.
Bigint για εξαιρετικά μεγάλους αριθμούς. Για να δηλώσουμε έναν ακέραιο ως BigInt βάζουμε στο τέλος το n.
String δηλ κείμενο. Μπορούμε να χρησιμοποιήσουμε είτε μονά είτε διπλά εισαγωγικά. Δεν υπάρχει καμία διαφορά μεταξύ τους. Υπάρχει ένα είδος εισαγωγικού, το ` (Backticks) το οποίο χρησιμοποιείται όταν το κείμενο που θέλουμε να εμφανίσουμε έχει μονά ή διπλά εισαγωγικά. Τέλος, αν θέλουμε να ενσωματώσουμε στο κείμενο μια μεταβλητή ή έκφραση θα πρέπει να χρησιμοποιήσουμε ${ } όπου μέσα στο άγκιστρο μπάινει η μεταβλητή ή έκφραση.
Boolean. true/false.
Null. Χρησιμοποιείται όταν δεν υπάρχει τιμή.
undefined . Η τιμή μιας μεταβλητής που έχει δηλωθεί αλλά δεν της έχει εκχωρηθεί κάποια τιμή.
symbol for unique identifiers.

Ενός non-primitive (χρησιμοποιούνται για αποθήκευση πολλών δεδομένων μαζί) τύπου δεδομένων:

Αντικείμενα.

				
					let x;
x = 6;

// εάν έχουμε περισσότερες από μια μεταβλητές μπορούμε να τις βάλουμε μαζί.
let x = 6, y="Μαρία";

alert( 1 / 0 ); // Infinity
alert( Infinity ); // Infinity
alert( "α" / 2 ); // NaN, δεν ορίζεται διαίρεση κειμένου με αριθμό.

let  m = 346_7124_152;

// το "n" σημαίνει οτι είναι BigInt
const megalos = 1234567890123456789012345678901234567890n;

// Μονά και διπλά εισαγωγικά εμφανίζονται κανονικά
alert(`T' όνομα του είναι "Νίκος"`);

// ενσωμάτωση μεταβλητής
let x="σας"
alert( `Καλημέρα ${x}!` ); // Καλημέρα σας!
// ενσωμάτωση έκφρασης
alert( `Το άθροισμα είναι: ${1 + 2}` ); // Το άθροισμα είναι:  3

let tipota;
alert(tipota); // undefined.  Η μεταβλητή δεν έχει τιμή.

Η Εμφάνιση Αποτελεσμάτων Γίνεται Με Τέσσερεις Τρόπους

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

Τελεστές

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

Συναρτήσεις

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

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

Function Declaration

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

Function Expressions

				
					let όνομα =  (παράμετρος1, παράμετρος2, παράμετρος3) =>  έκφραση;

// Ισοδύναμα μπορεί να γραφεί
function όνομα (παράμετρος1, παράμετρος2, παράμετρος3) {
    return έκφραση;
}

//αν έχουμε μια παραμετρο τότε οι () μπορούν να παραληφθούν
let όνομα =  παράμετρος1 =>  έκφραση; 
//αν δεν έχουμε παραμετρους τότε μπαίνουν ()
let όνομα =  () =>  έκφραση; 
// Αν θέλουμε η συνάρτση να έχει πολλές εντολές τότε χρειάζονται {} και return
let όνομα =  (παράμετρος1, παράμετρος2, παράμετρος3) =>  { 
     εντολές;
     return έκφραση;
};

Arrow Functions

Μία μεταβήτή που έχει δηλωθεί μέσα σε συνάρτηση είναι ορατή μόνο μέσα σε αυτή.
Μια μεταβλητή που έχει δηλωθεί έξω από συνάρτηση είναι προσβάσιμη και μέσα σε αυτή.
Αν μια μεταβλητή έχει δηλωθεί και μέσα και έξω από μια συνάρτηση τότε υπερισχύει η “μέσα”.

Δομή Επιλογής

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

				
					switch (age) {
  case 18:
   εντολές;
  case 29:
    εντολές;
  default:
    εντολές;
}

Δομή Επανάληψης

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

				
					while (condition) {
  ...
}


do {
  ...
} while (condition);


for(let i = 0; i < 10; i++) {
  ...
}

Αντικείμενα

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

				
					let πελάτης = {     
   όνομα: "Νίκος",  //key:value
   ηλικία: 30       
};
// προσθήκη 
πελάτης.τηλέφωνο="69100000";
// Διαγραφή
delete πελάτης.τηλέφωνο;

Πίνακες (Array)

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

				
					let πίνακας = [ 'Μήλο', { όνομα: 'Νίκος' }, true, function() { alert('hello'); } ];

Ας δούμε μερικές από τις πιο χρήσιμες μεθόδους:

pop() αφαιρεί το τελευταίο στοιχείο και το επιστρέφει.
push() προσθέτει ένα ή περισσότερα στοιχεία στο τέλος.
shift() αφαιρεί το πρώτο στοιχείο και το επιστρέφει.
unshift() προσθέτει ένα ή περισσότερα στοιχεία στην αρχή του πίνακα.
Length()

				
					let πίνακας = [ 'Μήλο', { όνομα: 'Νίκος' }, true, function() { alert('hello'); } ];

Ασκήσεις

[expand title=”Πολλαπλασιασμός και Διαίρεση δύο αριθμών“] Φτιάξτε προγραμμα σε javascript που να διαβάζει δύο αριθμητικές τιμές και να υπολογίζει το γινόμενο και την διαίρεση τους. [expandsub1 title=”Εμφάνιση Λύσης” swaptitle=”Απόκρυψη Λύσης“]

<!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 [/expandsub1] [/expand]

[expand title=”Μετατροπή Κελσίου σε Φαρενάιτ “] Φτιάξτε προγραμμα σε javascript που να διαβάζει μία θερμοκρασία Κελσίου και να την μετατρέπει σε Φαρενάιτ και το αντίστροφο. Δίνεται ο τύπος: F=C*9/5+32. [expandsub1 title=”Εμφάνιση Λύσης” swaptitle=”Απόκρυψη Λύσης“]

<!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 [/expandsub1] [/expand]

[expand title=”Δίσεκτο έτος “] Φτιάξτε προγραμμα σε javascript που να διαβάζει ένα έτος και να μας λέει αν είναι δίσεκτο ή οχι. Δίσεκτα είναι τα έτη που διαιρούνται με το 4 και όχι με το 100 καθώς και όσα διαιρούνται με το 400. [expandsub1 title=”Εμφάνιση Λύσης” swaptitle=”Απόκρυψη Λύσης“]

<!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 [/expandsub1] [/expand]

[expand title=”Έλεγχος εγκυρότητας“] Φτιάξτε προγραμμα που που να διαβάζει έναν αριθμό μεταξύ 1 και 100 και να μας λέει αν είναι έγκυρος ή οχι. [expandsub1 title=”Εμφάνιση Λύσης” swaptitle=”Απόκρυψη Λύσης“]

<!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 [/expandsub1] [/expand]

[expand title=”Παραγωγή τυχαίου αριθμού μεταξύ 0 και 5.“] Φτιάξτε προγραμμα που που να εμφανίζει τυχαίο αριθμό μεταξύ 0 και 5. [expandsub1 title=”Εμφάνιση Λύσης” swaptitle=”Απόκρυψη Λύσης“]Κατεβάστε το αρχείο HTML [/expandsub1]

<!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>

[/expand]

[expand title=”Παραγωγή τυχαίου αριθμού μεταξύ δύο ακέραιων αριθμών“] Φτιάξτε προγραμμα που που να δέχεται δύο ακέραιους αριθμούς και να εμφανίζει τυχαίο αριθμό μεταξύ τους. [expandsub1 title=”Εμφάνιση Λύσης” swaptitle=”Απόκρυψη Λύσης“]Κατεβάστε το αρχείο HTML [/expandsub1]

<!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>

[/expand]

[expand title=”Ταξινόμηση Φυσαλίδα“] Ταξινόμηση με την μέθοδο της Φυσαλίδας. [expandsub1 title=”Εμφάνιση Λύσης” swaptitle=”Απόκρυψη Λύσης“]Κατεβάστε το αρχείο HTML [/expandsub1]

<!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>

[/expand]

[expand title=”xxxxxxxxxxxxxxxxxxxxxxxxxxxxx“] xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx [expandsub1 title=”Εμφάνιση Λύσης” swaptitle=”Απόκρυψη Λύσης“]Κατεβάστε το αρχείο HTML [/expandsub1] [/expand]

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