Η Javascript είναι μια από τις πιο δημοφιλείς γλώσσες προγραμματισμού για την κατασκευή ιστοσελίδων, είναι μια γλώσσα scripting, η οποία αρχικά χρησιμοποιήθηκε για τη δημιουργία διαδραστικών στοιχείων σε έγγραφα html. Είναι εύκολη στην εκμάθηση και ο καθένας μπορεί να ξεκινήσει αμέσως, απλά εισάγοντας κώδικα js απευθείας στην ιστοσελίδα HTML.
Η πρώτη έκδοση αυτής της γλώσσας δημιουργήθηκε μέσα σε 10 ημέρες το 1995 από τον Brendan Eich, ενώ εργαζόταν στον φυλλομετρητή Netscape. Με την πάροδο του χρόνου εισήχθησαν νέα χαρακτηριστικά σε εκδόσεις όπως η ES2 1998 και η ES3 1999 και η τελευταία έκδοση με την ονομασία ECMAScript 6.
Τι είναι λοιπόν το javascript ES6; Πρόκειται για το πρότυπο για το javascript που κυκλοφόρησε τον Ιούνιο του 2015 και εισήχθησαν σε αυτή την έκδοση ορισμένα νέα χαρακτηριστικά όπως οι λέξεις-κλειδιά για το block scoping μεταβλητές Const και Let, συναρτήσεις βέλους, κλάσεις javascript, πολυγραμμοσειρές.
Τώρα το 2021, η εξέλιξη της γλώσσας είναι ES12 εισάγει τρία νέα χαρακτηριστικά, το ένα είναι οι νέοι λογικοί τελεστές ανάθεσης που είναι οι εξής ||= , &&= .Το δεύτερο χαρακτηριστικό είναι Promise.any που δέχεται έναν πίνακα promises και επιλύει μόλις επιλυθεί κάποια από αυτές. Το τρίτο είναι οι αριθμητικοί διαχωριστές οι οποίοι δίνουν τη δυνατότητα διαχωρισμού των χιλιάδων με υπογράμμιση όπως αυτό (_).
Γνωρίζατε ότι η ECMA είναι η Ευρωπαϊκή Ένωση Κατασκευαστών Υπολογιστών για την τυποποίηση της τεχνολογίας επικοινωνίας πληροφοριών, όπως οι γλώσσες προγραμματισμού
Η συνεχής παρακολούθηση των χαρακτηριστικών των ειδήσεων επιτρέπει σε έναν προγραμματιστή ιστοσελίδων javascript να δημιουργεί σύνθετες διεπαφές χρήστη και μεμονωμένες εφαρμογές.
Javascript: var
Στη Javascript οι μεταβλητές είναι δοχεία που αποθηκεύουν δεδομένα όπως συμβολοσειρές κειμένου, αριθμούς και boolean, οι τιμές αυτές μπορούν να αλλάξουν με την πάροδο του χρόνου, οπότε η δήλωση μιας μεταβλητής μπορεί να γίνει με τη χρήση της λέξης-κλειδί var. Χρησιμοποιώντας τη var δηλώνουμε μια μεταβλητή με πεδίο εφαρμογής μια συνάρτηση ή μια μεταβλητή με παγκόσμιο πεδίο εφαρμογής..
var car = "Ford";
Όταν δηλώνουμε μια μεταβλητή όπως παραπάνω την ίδια στιγμή είναι μια περίπτωση της κλάσης Object, που σημαίνει ότι θα έχει ιδιότητες, μεθόδους και χειριστές γεγονότων. Έτσι, ένα αντικείμενο Javascript μπορεί να δηλωθεί με τον ίδιο τρόπο όπως μια μεταβλητή μιας τιμής, αλλά θα μπορούσε να περιέχει πολλαπλές τιμές με την έννοια ενός πραγματικού αντικειμένου, όπως περιγράφεται στο παράδειγμα του αντικειμενοστραφούς προγραμματισμού.
Ένα αντικείμενο javascript μπορεί να δημιουργηθεί με την ακόλουθη μορφή, απλά ορίζοντας ιδιότητες και τιμές μέσα σε αγκύλες.
var car = {type:"Ford Fiesta", year:"2001", color:"red"}
Μια σημαντική πτυχή των μεταβλητών είναι η εμβέλεια που ορίζει την περιοχή του κώδικα όπου η μεταβλητή είναι προσβάσιμη, και αν δηλώσουμε ότι η μεταβλητή εκτός συνάρτησης έχει παγκόσμια εμβέλεια που σημαίνει ότι είναι προσβάσιμη από οπουδήποτε στον κώδικα, ας συνοψίσουμε τις εμβέλειες.
- global scope is the js execution environment for variables that are not declared as let, const, var
- function scope are curly bruckets of a function.
- Block scope variables in curly bruckets loops, if statements only defined by let and const
Από την άλλη πλευρά, αν μια μεταβλητή δηλωθεί μέσα σε μια συνάρτηση θα μπορούσε να προσπελαστεί τοπικά. Η ανάγκη για την εισαγωγή μεταβλητών με αποκλεισμένη εμβέλεια οφείλεται στο γεγονός ότι στη javascript οι μεταβλητές που ορίζονται με var είναι εξ ορισμού με εμβέλεια συνάρτησης function-scoped, γεγονός που μπορεί να προκαλέσει κάποια προβλήματα κατά την επαναδήλωση μεταβλητών με το ίδιο όνομα και σύγκρουση με τα ονόματα κατά την πρόσβαση στις μεταβλητές.
Javascript: const
Aυτή είναι μια μεταβλητή με block-scoped, που σημαίνει ότι ορίζεται μέσα σε ένα μπλοκ με τετράγωνες αγκύλες σε if, for, while, κ.λπ. η μεταβλητή υπάρχει μόνο μέσα στο μπλοκ και όχι έξω από αυτό, όπως θα μπορούσε να συμβεί με μια μεταβλητή με εμβέλεια συνάρτησης.Η ειδική περίπτωση με την const είναι ότι το αναγνωριστικό δεν μπορεί να επαναδηλωθεί ή να επαναπροσδιοριστεί είναι αμετάβλητο αλλά μπορούμε να προσθέσουμε νέες ιδιότητες ή να αλλάξουμε τις τιμές στις υπάρχουσες
const car = "Fiat";
car = "Mercedes"; // this cause an error
car.type = "pick up"; // this is ok
In real-world let's examine some code from angular observables
const locations = new Observable((observer) => {
.....
});
const locationsSubscription = locations.subscribe({ });
Στο παραπάνω snippet, πρόκειται για ένα παράδειγμα observable, όπου τα locations είναι ένα αντικείμενο javascript από την περίπτωση του objervable, αυτό το αντικείμενο έχει μια συνάρτηση που ονομάζεται subscribe.Το όνομα των locations είναι μοναδικό και δεν μπορεί να επαναδηλωθεί, την ίδια στιγμή έχει μια νέα μέθοδο που ονομάζεται subscribe() επιστρέφει ένα άλλο αντικείμενο που ονομάζεται Subscription Object. Η μέθοδος subscribe μέθοδος είναι μέρος ενός μοτίβου παρατηρητή όταν καλείται σηματοδοτεί ότι το observable θα αρχίσει να λαμβάνει τιμές από το αντικείμενο που έχει εγγραφεί σε αυτό.
Στο παραπάνω κομμάτι του κώδικα, η δημιουργία της περίπτωσης new Observable δεν αποτελεί μέρος της javascript αλλά ανήκει στην RxJS, μια βιβλιοθήκη αντιδραστικού προγραμματισμού. Έτσι, η Angular κάνει χρήση του προτύπου σχεδιασμού λογισμικού observer που έχει υλοποιηθεί με τη χρήση της RxJs.Το αντικείμενο locations είναι ένα observable ή αλλιώς μια ροή ασύγχρονων συμβάντων που καταγράφουν τη γεωγραφική θέση του χρήστη μέσω του προγράμματος περιήγησης χρησιμοποιώντας το Geolocation API.
Έτσι, όταν κάνετε μια κλήση στη μέθοδο subscribe(), τότε το παρατηρήσιμο αρχίζει να ακούει για ενημερώσεις. Στη μέθοδο subscribe περνάμε ένα αντικείμενο παρατηρητή το οποίο είναι ένα απλό αντικείμενο javascript που περιλαμβάνει τους χειριστές κλειδιών next, error, complete..
Javascript: let
όταν ορίσουμε μια μεταβλητή let, η μεταβλητή είναι ενεργή μέσα block scope αυτό εννοότας curly bruckets {} όπως βρίσκονται if statements, loops etc. Υπάχουν ομοιότητες με το var, για παράδειγμα ανα ορίζουμε μια μεταβλητή let εκτός της συνάρτησης let έχει ακριβώς την ίδια λειτουργία όπως η συνάρτηση var, οι διαφορές είναι τα properties της let δεν μπορούν προστεθούν σαν properties του global window object.
If it defined inside a function has exactly the same behavior as local function as var, the basic difference with var is visibility, let's take the case of block scope on for loop and remember the let variable cannot redeclared.
function relatedProducts() {
// my_product is not visible out here
for( let my_product = 0; my_product < 5; my_product++ ) {
// my_product is visible here and to all sub-blocks
}
// my_product is not visible out here
}
Javascript Arrow functions
const hello = function() {
return "hello there";
}
is equalivant to
const hello = () => {
return "hello there";
}
Javascript Asynchronous programming
ένα α δημοφιλή χαρακτηριστικά στην έκδοση ES6 είναι οι υποσχέσεις, μια υπόσχεση είναι ένας κάτοχος θέσης για μια τιμή που θα προκύψει από μια μελλοντική ασύγχρονη λειτουργία, θα είναι το αποτέλεσμα μιας λειτουργίας ή ένα μήνυμα σφάλματος κατά την αποτυχία εκτέλεσης αυτής της λειτουργίας.
Ο κύριος λόγος της χρήσης αυτής της λειτουργίας είναι η επίλυση του προβλήματος με τα callbacks, που υπάρχουν στις ασύγχρονες λειτουργίες και γεμίζουν το αντικείμενο της javascript.
Υπάρχουν τρεις καταστάσεις αυτής της λειτουργίας
- Pending
- Fulfilled - the result is a value
- Rejected - the result is an object
A promise can be used with async to write a promise code as to be synchronous without blocking the main thread.
async function is asynchronous function that await is permitted
await works only inside of an async function and forces an asynchronous function to wait until a promise fulfilled or rejected
async function f() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("done!"), 1000)
});
try {
let result = await promise;
alert(result);
} catch (e) {
console.log(e);
}
}
and async functions always return a value.
Intersection observer API
Ένα από τα πιο σημαντικά χαρακτηριστικά του native javascript το observer api , αυτό το χαρακτηριστικό προσφέρει τη δυναότητ να κάνετε monitor ένα html στοιχείο όπως το div, p, η κάθε στοιχείο που μπορεί να γίνει ορατό στην οθόνη ή σχετικό με ένα άλλο. Αυτό είναι πολύ χρήσιμο γιατί εύκολα προσθέτε δυνατότητες όπως το loading an item αποτελεσματικά, making split coding, lazy loading εικόνες, and και περισσότερα
Ας πάρουμε το παράδειγμα όπου υπάρχει div με ένα id που ονομάζεται sharing-tools (θα μπορούσε να είναι το widget addthis), αν το div δεν είναι διαθέσιμο στην οθόνη κατά την πρώτη φόρτωση, αλλά βρίσκεται κάτω από την πτυχή, εδώ ένας απλός κώδικας για να το φορτώσετε έξυπνα και να μειώσετε την πρώτη και την εκτέλεση νήματος
const sharingTools = document.getElementById("sharing-tools");
let observer = new IntersectionObserver((entries, observer) => {
entries.forEach( entry => {
if( entry.isIntersecting) {
// load addthis.com tools here by dynamic create a script tag in the head
var script = document.createElement("script");
...
observer.unobserve(entry.target);
}
}
observer.observe(sharingTools);
Javascript loop
Ένας νέος βρόχος εισήχθη με το ES5 ο βρόχος forEach, αυτός είναι ένας εύκολος τρόπος για να κάνετε βρόχο μέσα στον πίνακα, μπορεί να χρησιμοποιηθεί μόνο με έναν πίνακα, σύνολα και χάρτες. Χρησιμοποιώντας αυτό κάποιος μπορεί να υλοποιήσει μια επανάκληση για κάθε στοιχείο ενός πίνακα. Στο παραπάνω παράδειγμα, βλέπετε τη χρήση όταν ο IntersectionObserver κάνει βρόχο μέσα από τις καταχωρήσεις που έχουν συνδεθεί με το Intersection για να παρακολουθεί πότε ένα στοιχείο είναι διασταύρωση..
entries.forEach( entry => {
if( entry.isIntersecting) {
...
}
}
Split Coding for high performance in mobile devices
Όταν συνδυάζετε αποτελεσματικά τον intersection observer και ταυτόχρονα εφαρμόζετε αυτή τη μικροσκοπική βιβλιοθήκη LoadJS, μπορείτε να χωρίσετε τους κώδικες javascript σας σε κομμάτια και να βελτιώσετε δραματικά τις επιδόσεις στο Google PageSpeed Insights. Μπορείτε να έχετε ένα μέγιστο στις μετρήσεις όπως ο Χρόνος για την αλληλεπίδραση, έτσι για την ένδυση και την Time To Interactive και user experience
