Τι είναι η JavaScript;
![](./github.png)
Η JavaScript είναι μια γλώσσα προγραμματισμού που επιτρέπει την δημιουργία interactive web εφαρμογών (πχ. Facebook, Gmail, YouTube).
Με την HTML και το CSS, αποτελεί μία από τις τρεις βασικές Τεχνολογίες Παγκόσμιου Ιστού.
HTML + CSS + JS = 💘
Εμφανισιακά και σε ό,τι αφορά το συντακτικό της, η JavaScript θυμίζει αρκετά Java, C, και C++, ενώ έχει και επιρροές από Perl και Python.
Είναι case-sensitive και υποστηρίζει το Unicode character set. Για παράδειγμα, η λέξη Früh
είναι αποδεκτή σαν όνομα μεταβλητής, αλλά είναι διαφορετική από τη früh
.
var früh = 'Alice';
var Früh = 'Bob';
console.log(früh); // "Alice";
console.log(Früh); // "Bob";
Τα σχόλια εισάγονται με τον ίδιο τρόπο που εισάγονται και στην C++:
// a one line comment
/* this is a longer,
* multi-line comment
*/
Τα ονόματα των μεταβλητών και σταθερών πρέπει να αρχίζουν με γράμμα, underscore (_
) ή το σύμβολο του δολλαρίου ($
).
var player = { name: 'Jon', surname: 'Doe' };
var Animal = 'Dog';
var _title = 'The Hitchhiker\'s Guide to the Galaxy';
var $page1 = 1;
var $$selector = document.getElementById('my-order');
var PI = 3.1415926535897932384626433;
var Sitting_Duck = "Quack!";
Ο oρισμός μεταβλητών και σταθερών γίνεται
με τα παρακάτω statements:
var
read/writelet
read/writeconst
read-onlyΜεταβλητές που ορίζονται με var
ή let
χωρίς να αρχικοποιηθούν, έχουν την τιμή undefined
από default. Σε περίπτωση που γίνει reference σε μεταβλητή που δεν έχει οριστεί, προκαλείται ReferenceError
:
var a;
console.log('The value of a is ' + a); // undefined
// Uncaught ReferenceError: c is not defined
console.log('The value of c is ' + c);
Η αρχικοποίηση μιας σταθεράς const
πρέπει να γίνεται κατά τον ορισμό της. Οι σταθερές δεν μπορούν να μεταβληθούν κατά την εκτέλεση.
const foo = 'bar';
// Uncaught TypeError: Assignment to constant variable 💥
foo = 'foobar';
Σε σταθερά const
που έχει γίνει ανάθεση τιμής τύπου Object
, τα επιμέρους properties του Object μπορούν να μεταβληθούν:
const MY_OBJECT = { foo: 'foo' }
MY_OBJECT.foo = 'bar'; // These is OK
// Uncaught TypeError: Assignment to constant variable 💥
MY_OBJECT = { bar: 'bar' };
Το ίδιο ισχύει και στην περίπτωση που έχει γίνει ανάθεση τιμής τύπου Array
:
const ΜΥ_ARRAY = ['foo'];
// These is OK
ΜΥ_ARRAY.push('bar');
ΜΥ_ARRAY[2] = 'foobar';
// Uncaught TypeError: Assignment to constant variable 💥
ΜΥ_ARRAY = ['bar'];
Boolean
true
και false
null
undefined
Number
BigInt
String
Symbol
Τα block statements επιτρέπουν την ομαδοποίηση άλλων statements. Η έναρξή τους σηματοδοτείται με {
και το τέλος τους με }
:
if (true) {
const name = 'John';
console.log(`Hello, ${name}!`);
}
Στο παραπάνω παράδειγμα το block statement αποτελείται από τις γραμμές 2 και 3.
Τα blocks μπορούν να είναι και εμφωλευμένα:
if (true) {
console.log('Hello, World!');
if (true) {
const name = 'John';
console.log(`Hello, ${name}!`);
}
}
Στο παραπάνω παράδειγμα παρουσιάζονται δύο block statements στις γραμμές 2 - 7 και 5 - 6.
Τα conditional statements είναι block statements που εκτελούνται μόνο όταν ικανοποιείται η συνθήκη που τα περιβάλλει.
Υπάρχουν δύο conditional statements:if/else
και switch
.
if/else
Το if
statement εκτελείται όταν ικανοποιείται η συνθήκη, δηλαδή όταν η συνθήκη επιστρέφει true
. Σε αντίθετη περίπτωση εκτελείται το else
statement.
function hello(name) {
if (name === 'John') {
console.log('Hello, John!');
} else {
console.log('Hello, stranger!');
}
}
hello('John'); // "Hello, John!"
hello('Mike'); // "Hello, stranger!"
if/else
Μπορούν να υπάρχουν πολλαπλά if
statements με την χρήση else if
statements:
if (name === 'John') {
console.log('Hello, John!');
} else if (name === 'Mike') {
console.log('Hello, Mike!');
} else {
console.log('Hello, stranger!');
}
if/else
Το else
statement είναι προαιρετικό:
// This is OK
if (name === 'John') {
console.log('Hello, John!');
}
switch
Σε αντίθεση με το if/else
statement που ικανοποιείται με Boolean
τιμές, το switch
statement ικανοποιείται κάνοντας σύγκριση τιμών σε strict mode (===
).
switch (expression) {
case label_1: // eg. label_1 === expression
statements_1
[break;]
…
default:
statements_n
[break;]
}
switch
Ο έλεγχος της συνθήκης γίνεται sto label του κάθε case
. Το default
case εκτελείται στην περίπτωση που δεν ικανοποιηθεί κανένα από τα case
statements.
switch (fruittype) {
case 'Oranges': // eg. fruittype === 'Oranges'
console.log('Oranges are $0.59 a pound.');
case 'Apples': // eg. fruittype === 'Apples'
console.log('Apples are $0.32 a pound.');
default:
console.log(`Sorry, we are out of ${fruittype}.`);
}
switch
Με την χρήση break
statement, τερματίζεται η εκτέλεση του switch
block. Αυτό εξασφαλίζει πως θα εκτελεστεί μόνο ένα case
:
var fruittype = 'Oranges';
switch (fruittype) {
case 'Oranges': // Woohoo!
console.log('These are cheap oranges.');
break;
case 'Oranges': // Never reaches this one :(
console.log('These are expensive oranges.');
}
Στη JavaScript τα operators δέχονται πάντα δύο arguments. Μοναδική εξαίρεση αποτελεί το ternary (conditional) operator.
Περιλαμβάνουν τελεστές πρόσθεσης +
, αφαίρεσης -
, πολλαπλασιασμού *
και διαίρεσης /
, υπολοίπου %
, προσαύξησης ++
, μείωσης --
και έκθεσης σε αριθμό **
:
var var1 = 1 + 1; // 2
var var2 = 3 - 1; // 1
var var3 = 2 * 2; // 4
var var4 = 4 / 2; // 2
var var5 = 2 % 2; // 0
var var6 = 3 % 2; // 1
var var7 = 3; var7++; // 4
var var8 = 3; var8--; // 2
var var9 = 2 ** 3; // 8
Οι τελεστές πρόσθεσης +
και αφαίρεσης -
μπορούν να χρησιμοποιηθούν και σαν μοναδιαίοι τελεστές (unary):
+
προσπαθεί να κάνει cast σε αριθμό-
επιστρέφει τον αντίθετο αριθμό
var x = 1;
-x; // -1
-"3"; // -3
+"3"; // 3
+new Date(); // 1601894079725
+null; //0
+NaN; // NaN
+undefined // NaN
&&
+ ||
(Λογικοί)Επιστρέφουν αληθείς ή ψευδείς τιμές.
var a1 = true && true; // true
var a2 = true && false; // false
var a3 = false && (3 == 4); // false
var a4 = 'Cat' && 'Dog'; // 'Dog'
var a5 = true && 'Dog'; // 'Dog'
var a6 = false && 'Cat'; // false
var a7 = 'Cat' && false; // false
var a8 = true || 'Dog' // true
var a9 = 'Dog' || true // 'Dog'
var a10 = false || 'Dog' // 'Dog'
var a11 = 'Dog' && 0 // 0
Ο τελεστής &&
(AND) επιστρέφει:
true && true && true && false && true // false
// ^ exists here
true && true && true && 0 && false // 0
// ^ exists here
true && true && "Dog" // "Dog"
// ^ exists here
Ο τελεστής ||
(OR) επιστρέφει:
false || true || true || false || true // true
// ^ exists here
false || false || "Dog" || false || false // "Dog"
// ^ exists here
false || false || 0 || false // false
// ^ exists here
Είναι ο μοναδικός τελεστής που δέχεται τρία arguments.
condition ? val1 : val2
Εαν η συνθήκη condition
είναι αληθής, τότε ο τελεστής παίρνει την τιμή val1
. Σε διαφορετική περίπτωση παίρνει την τιμή val2
.
console.log((1 === 1) ? true : false); // true
console.log((1 === 2) ? true : false); // false
Οι functions είναι επαναχρησιμοποιήσιμα block statements που δέχονται input και παράγουν αποτέλεσμα ή κάνουν υπολογισμούς βάσει του input που δέχτηκαν.
Ορίζονται με το keyword function
, ακολουθούμενο από:
Τρόποι ορισμού function:
function add(a, b) {
return a + b;
}
const factorial = function fac(n) {
return n < 2 ? 1 : n * fac(n - 1);
};
(function(name) {
return `Hello, ${name}`;
})('John');
Τα arrow functions έχουν πιο σύντομο συντακτικό, αλλά δεν έχουν features που έχουν οι functions που ορίζονται με το function
keyword (πχ. this
, arguments
, super
):
const add = (a, b) => a + b;
// Uncaught ReferenceError: arguments is not defined
const subtract = (a, b) => console.log(arguments);
// Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
(function(a, b, c) {
console.log(arguments);
})(1, 2, 3);
Οι classes μας επιτρέπουν να δημιουργούμε objects του ίδιου τύπου. Τα objects που προέχονται από την ίδια class έχουν τα ίδια properties και methods.
class MyClass {
constructor() { ... }
functionName1() { ... }
functionName2() { ... }
functionName3() { ... }
...
}
Το constructor()
method καλείται αυτόματα κάθε φορά που δημιουργούμε ένα object. Αυτό μας επιτρέπει να αρχικοποιούμε τα properties του object.
class User {
constructor(name) {
this.name = name;
}
sayHi() {
console.log(`Hello, ${this.name}!`);
}
}
const user = new User("John");
user.sayHi(); // Hello, John!
user.name; // "John"
Οι classes μπορούν να έχουν static
methods. Τα static methods δεν υπάρχουν στα instance objects της class.
class ClassWithStaticMethod {
static staticMethod() {
return 'called static method';
}
}
ClassWithStaticMethod.staticMethod(); // "called static method"
const instance = new ClassWithStaticMethod();
// Uncaught TypeError: instance.staticMethod is not a function 💥
instance.staticMethod();
Με το extends
keyword μπορούμε να δημιουργήσουμε classes που κληρονομούν functionality από άλλα classes.
class Rectangle {
sayName() {
console.log(`I'm a ${this.name}`);
}
}
class Square extends Rectangle {
constructor() {
super();
this.name = 'Square';
}
}
const square = new Square();
square.sayName(); // I'm a Square
Το Array
είναι ένας τύπος δεδομένων που επιτρέπει την ανάθεση πολλαπλών τιμών σε μια μεταβλητή ή σταθερά. Η έναρξή τους σηματοδοτείται με [
και το τέλος του με ]
, ή με την class Array
. Οι τιμές χωρίζονται με κόμμα (,
) και μπορεί να είναι διαφορετικών τύπων.
var data = [1, "Hello", null, , (a, b) => a + b];
var cars = new Array("Saab", "Volvo", "BMW");
Η κάθε τιμή αντιστοιχεί σε ένα μοναδικό index* του array και η πρόσβαση σε αυτή γίνεται με τον παρακάτω τρόπο:
var cars = new Array("Saab", { name: "Volvo" }, () => "BMW");
cars[0]; // "Saab"
cars[1].name; // "Volvo"
cars[2](); // "BMW"
cars[3]; // undefined
* Η αρίθμηση των indices ξεκινά από το 0
.
var cars = new Array("Saab", "Volvo", "BMW");
cars.filter((c) => c === "Saab"); // ["Saab"]
cars.sort(); // ["BMW", "Saab", "Volvo"]
cars.indexOf("Volvo"); // 1
cars.indexOf("Opel"); // -1
cars.includes("Volvo"); // true
cars.push("Opel"); // ["Saab", "Volvo", "BMW", "Opel"]
const last = cars.pop(); // "Opel"
console.log(cars) // ["Saab", "Volvo", "BMW"]
const first = cars.shift(); // "Saab"
console.log(cars) // ["Volvo", "BMW"]
const getInitial = (s) => s[0];
cars.map((c) => `a ${c}`); // ["a Volvo", "a BMW"]
cars.map(getInitial); // ["V", "B"];
Τα objects είναι μια αυτόνομες οντότητες με ιδιότητες (properties). Για παράδειγμα, ένα αυτοκίνητο είναι ένα αντικείμενο με ιδιότητες όπως χρώμα, σχέδιο, βάρος, κλπ.
Με τον ίδιο τρόπο, τα αντικείμενα JavaScript έχουν properties οι οποίες καθορίζουν τα χαρακτηριστικά τους.
Συντακτικά η έναρξή τους σηματοδοτείται με {
και το τέλος τους με }
, ενώ η δομή τους αποτελείται από ζευγάρια κλειδιών και τιμών.
var car = {
color: "red",
description: function() {
return `This is a ${this.color} car`;
},
};
console.log(car.color); // "red"
console.log(car["color"]); // "red"
var propertyName = "color";
console.log(car[propertyName]); // "red"
console.log(car.description()); "This is a red car"
Object.create
class method
const job = {
position: 'cashier',
isAvailable: true,
showDetails() {
const accepting = this.isAvailable
? 'is accepting'
: 'is not accepting';
console.log(`The ${this.position} position ${accepting}`);
}
};
const barista = Object.create(job);
barista.position = "barista";
barista.isAvailable = false;
barista.showDetails(); // The barista position is not accepting
Object.keys
class method
const employees = {
boss: 'Michael',
secretary: 'Pam',
sales: 'Jim',
accountant: 'Oscar'
};
// Get the keys of the object
const keys = Object.keys(employees);
console.log(keys); // ["boss", "secretary", "sales", "accountant"]
Object.values
class method
const session = {
id: 1,
time: '26-July-2018',
device: 'mobile',
browser: 'Chrome'
};
// Get all values of the object
const values = Object.values(session);
console.log(values); // [1, "26-July-2018", "mobile", "Chrome"]
Object.entries
class method
const operatingSystem = {
name: 'Ubuntu',
version: 18.04,
license: 'Open Source'
};
const entries = Object.entries(operatingSystem);
console.log(entries);
/* [["name", "Ubuntu"]
["version", 18.04]
["license", "Open Source"]] */
Object.assign
class method
const name = { firstName: 'Philip' };
const details = { job: 'Delivery Boy', };
const character1 = Object.assign(name, details);
console.log(character1); // { firstName: "Philip", job: "Delivery Boy" }
const character2 = { ...name, ...details };
console.log(character2); // { firstName: "Philip", job: "Delivery Boy" }
console.log("The end!🎉")