JavaScript – Εισαγωγή

JavaScript – Εισαγωγή

Η JavaScript είναι μια από τις 3 γλώσσες που πρέπει να γνωρίζουν οι web developers. Πρώτη είναι η HTML που καθορίζει το περιεχόμενο των ιστοσελίδων, δεύτερη η CSS που καθορίζει την διάταξη των ιστοσελίδων και τρίτη η Javascript για να προγραμματίσετε τη συμπεριφορά των ιστοσελίδων. Η JavaScript είναι η πιο δημοφιλής γλώσσα προγραμματισμού στον κόσμο και είναι εύκολη στην εκμάθηση. Ας δούμε μερικά παραδείγματα χρήσης της Javascript.

 

Δοκιμάστε!

 

Tip: JavaScript και Java είναι εντελώς διαφορετικές γλώσσες, τόσο σε σύλληψη και σχεδιασμό.

 

JavaScript – Δήλωση, functions, events

JavaScript – Δήλωση

H JavaScript μπορεί να τοποθετηθεί στα body και head τμήματα μιας ιστοσελίδας. Στην HTML, ο κώδικας JavaScript πρέπει να βρίσκετε μεταξύ των στοιχείων script και /script.

JavaScript functions και events

Η JavaScript function είναι ένα μπλοκ κώδικα που εκτελείτε όταν “ζητηθεί”(καλεστεί). Για παράδειγμα μία function μπορεί να εκτελεστεί όταν συμβεί ένα γεγονός όπως το click του ποντικιού από ένα χρήστη.

 

Δοκιμάστε!

 

JavaScript – Έξοδος

JavaScript-Έξοδος

H JavaScript δεν έχει εσωτερικές functions για εκτύπωση ή εμφάνιση δεδομένων. Μπορούμε να “δούμε” τα δεδομένα με τη χρήση των: window.alert(), document.write() , innerHTML, console.log().

 

Δοκιμάστε!

 

Javascript – Syntax

Javascript – Syntax

Όταν μιλάμε για σύνταξη(syntax) στην javascript εννοούμε το σύνολο των κανόνων για τη κατασκευή προγραμμάτων. Το πρόγραμμα ενός υπολογιστή είναι μια λίστα “οδηγιών” που πρέπει να “εκτελούνται” από τον υπολογιστή. Σε μια γλώσσα προγραμματισμού, αυτές οι οδηγίες ονομάζονται δηλώσεις, στη Javascript οι δηλώσεις διαχωρίζονται με ερωτηματικά. Οι δηλώσεις αποτελούνται από Values, Operators, Expressions, Keywords, and Comments.

 

Δοκιμάστε!

 

JavaScript – Τύποι δεδομένων

JavaScript Τύποι δεδομένων

Οι Τύποι δεδομένων στην JavaScript είναι String, Number, Boolean, Array, Object.
Στον προγραμματισμό οι τύποι δεδομένων είναι μια σημαντική έννοια, για να κάνουμε πράξεις πρέπει να γνωρίζουμε το τύπο δεδομένων. Η JavaScript έχει dynamic τύπους δεδομένων, αυτό σημαίνει πως η ίδια μεταβλητή μπορεί να χρησιμοποιηθεί με διαφορετικούς τύπους.

 

Δοκιμάστε!

 

JavaScript Functions

JavaScript Functions

Είναι μπλοκ κώδικα σχεδιασμένα για να εκτελούν μια συγκεκριμένη εργασία. Ορίζονται με τη λέξη-κλειδί function, που ακολουθείται από ένα όνομα και παρενθέσεις (). Τα ονόματα των function μπορούν να περιέχουν γράμματα, ψηφία, παύλες. Οι παρενθέσεις περιλαμβάνουν τα ονόματα των παραμέτρων χωρισμένα με κόμμα: (παράμετρος1, παράμετρος2, …). Ο κώδικας που πρέπει να εκτελεστούν τοποθετείται μέσα σε αγκύλες: {}.

 

Δοκιμάστε!

 

JavaScript Objects(Αντικείμενα)

JavaScript Objects(Αντικείμενα)

Στην πραγματική ζωή, ένα αυτοκίνητο είναι ένα αντικείμενο. Ένα αυτοκίνητο έχει ιδιότητες όπως το βάρος και το χρώμα, και μεθόδους, όπως εκκίνηση και στάση. Όλα τα αυτοκίνητα έχουν τις ίδιες ιδιότητες, αλλά οι τιμές τους διαφέρουν. Όλα τα αυτοκίνητα έχουν τις ίδιες μεθόδους, αλλά οι μέθοδοι εκτελούνται σε διαφορετικούς χρόνους. Στη JavaScript τα Objects είναι μεταβλητές που περιέχουν πολλές τιμές. Οι τιμές αναγράφονται name:value(όνομα:τιμή) και είναι οι ιδιότητες. Οι μέθοδοι είναι ενέργειες που μπορούν να εκτελεστούν σε αντικείμενα και αποθηκεύονται σε function definitions(ορισμούς συναρτήσεων). Μπορείτε να αποκτήσετε πρόσβαση στις ιδιότητες ενός αντικειμένου με δύο τρόπους(objectName.propertyName ή objectName[“propertyName”]). Μπορείτε να αποκτήσετε πρόσβαση σε μια μέθοδο με την ακόλουθη σύνταξη: objectName.methodName().

 

Δοκιμάστε!

 

JavaScript Arrays(Πίνακες)

JavaScript Arrays(Πίνακες)

Οι JavaScript arrays χρησιμοποιούνται για να αποθηκεύουν πολλές τιμές σε μία μεταβλητή. Μπορείτε να έχετε πρόσβαση στις τιμές με τη χρήση ενός index(cars[0]). Μπορούν να περιέχουν objects, functions και άλλους arrays(myArray[0] = Date.now, myArray[1] = Function1, myArray[2] = Car1).Η πραγματική δύναμη των JavaScript arrays είναι στο ότι περιέχουν ιδιότητες και μεθόδους(cars.length , cars.sort()).Οι JavaScript arrays χρησιμοποιούν αριθμούς για indexes, ενώ τα objects χρησιμοποιούν ονόματα για indexes.

 

Δοκιμάστε!

 

JavaScript Array Methods

JavaScript Array Methods

Στην προηγούμενη ανάρτηση μιλήσαμε για τους JavaScript arrays, θα συνεχίσουμε με τις JavaScript Array Methods. Θα αναφερθούμε στις μεθόδους toString(), join(), pop(), push(), shift(), unshift(), splice(), sort() , reverse().

 

Δοκιμάστε!

 

JavaScript If…Else

JavaScript If…Else

Οι δηλώσεις επιλογής If…Else χρησιμοποιούνται για την εκτέλεση διαφόρων εντολών που βασίζονται σε διαφορετικές συνθήκες. Στην Javascript υπάρχουν οι δηλώσεις επιλογής: if, else, else if, switch.

 

Δοκιμάστε!

 

JavaScript For Loop(Επαναλήψεις)

JavaScript For Loop(Επαναλήψεις)

Οι δηλώσεις επανάληψης εκτελούν ένα κομμάτι κώδικα πολλές φορές. Η Javascript υποστηρίζει τα εξής είδη επαναλήψεων: for, while.

 

Δοκιμάστε!

 

JavaScript Regular Expressions

JavaScript Regular Expressions

Μια Regular Expression(κανονική έκφραση) είναι μια ακολουθία χαρακτήρων που σχηματίζει ένα μοτίβο αναζήτησης που μπορεί να χρησιμοποιηθεί για την αναζήτηση και αντικατάσταση κειμένου.

 

Δοκιμάστε!

 

JavaScript Math Object

JavaScript Math Object

Το object Math μας επιτρέπει να εκτελούμε μαθηματικές πράξεις, περιλαμβάνει διάφορες μαθηματικές μεθόδους.

 

Δοκιμάστε!

 

JavaScript Ημερομηνίες

JavaScript Ημερομηνίες

Το object Date(ημερομηνία) μας επιτρέπει να δουλεύουμε με ημερομηνίες (χρόνια, μήνες, ημέρες, ώρες, λεπτά, δευτερόλεπτα, και χιλιοστά του δευτερολέπτου). Στη JavaScript η ημερομηνία μπορεί να γραφτεί σαν κείμενο Mon Apr 18 2016 07:51:46 GMT+0300 (Θερινή ώρα GTB) ή σαν αριθμός 1460955106780 που είναι τα χιλιοστά του δευτερολέπτου από την 1η Ιανουαρίου 1970, 00:00:00. Κατά τον καθορισμό μιας ημερομηνίας, αν δεν προσδιορίζουμε τη χρονική ζώνη, η JavaScript χρησιμοποιεί τη χρονική ζώνη του προγράμματος περιήγησης.

 

Δοκιμάστε!

 

JavaScript Debugging

JavaScript Debugging(εντοπισμός σφαλμάτων)

Είναι δύσκολο να γράψουμε κώδικα JavaScript χωρίς πρόγραμμα εντοπισμού σφαλμάτων. Ο κώδικας μας ενδέχεται να περιέχει σφάλματα σύνταξης ή λογικά σφάλματα. Συχνά, όταν ο κώδικας της JavaScript περιέχει σφάλματα δεν υπάρχουν μηνύματα λάθους και δεν έχουμε καμία ένδειξη πού να ψάξουμε. Το ψάξιμο για τα λάθη στον κώδικα μας ονομάζεται Debugging. Το Debugging δεν είναι εύκολο, αλλά ευτυχώς, όλα τα σύγχρονα προγράμματα περιήγησης έχουν ενσωματωμένο Debugger. Στο Chrome, firefox, ie πατήστε το πλήκτρο F12, στην Opera πατήστε τον συνδυασμό πλήκτρων ctrl+shift+c. Στο Debugger μπορούμε να ορίσουμε σημεία διακοπής (σημεία όπου σταματάει η εκτέλεση κώδικα), και να εξετάσουμε τις μεταβλητές, ενώ ο κώδικας μας εκτελείται.

 

Δοκιμάστε!

 

JavaScript JSON

JavaScript JSON

JSON σημαίνει JavaScript Object Notation. Είναι μια μορφή για την αποθήκευση και τη μεταφορά δεδομένων. JSON χρησιμοποιείται συχνά όταν στέλνουμε δεδομένα σε ένα διακομιστή. Η μορφή JSON είναι συντακτικά όμοια με τον κώδικα για τη δημιουργία αντικειμένων JavaScript. Εξαιτίας αυτής της ομοιότητας, μπορούμε να μετατρέψουμε εύκολα τα δεδομένα JSON σε αντικείμενα JavaScript. Τα JSON δεδομένα είναι γραμμένα σε ζεύγη όνομα/τιμή(“firstName”:”ΓΙΑΝΝΗΣ”). Τα αντικείμενα JSON είναι γραμμένα μέσα άγκιστρα( {“firstName”:”ΝΙΚΟΣ”, “lastName”:”ΝΙΚΟΥ”} ). Οι πίνακες JSON είναι γραμμένοι μέσα σε αγκύλες( “employees”:[
{“firstName”:”ΝΙΚΟΣ”, “lastName”:”ΝΙΚΟΥ”},
{“firstName”:”ΜΑΡΙΑ”, “lastName”:”ΜΑΡΙΑΣ”}] ).
Για τη μετατροπή απο JSON σε Javascript μορφή υπάρχει η συνάρτηση JSON.parse().

 

Δοκιμάστε!

 

Φιλοξενία ιστοσελίδων και ονόματα(domains).

 

it-838384_1280

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

 

Τι είναι το World Wide Web?
Το Web είναι ένα δίκτυο υπολογιστών σε όλο τον κόσμο. Όλοι οι υπολογιστές μπορούν να επικοινωνούν μεταξύ τους και χρησιμοποιούν ένα πρωτόκολλο επικοινωνίας που ονομάζεται HTTP.

 

Πως λειτουργεί το WWW?
Οι Web πληροφορίες είναι έγγραφα που ονομάζονται ιστοσελίδες και είναι αποθηκευμένες σε υπολογιστές που ονομάζονται διακομιστές. Οι υπολογιστές που βλέπουν τις ιστοσελίδες ονομάζονται πελάτες και βλέπουν τις ιστοσελίδες με τους web browsers. Δημοφιλείς web browsers είναι ο Google Chrome, Firefox και Internet Explorer.

 

Πως ένας web browser ζητάει μία ιστοσελίδα;
Ένας web browser ζητάει μια σελίδα από ένα web server(διακομιστή) με μια τυποποιημένη αίτηση HTTP που περιέχει μια διεύθυνση σε αυτή τη μορφή: http://plinet.net/index.html

 

Πως ένας web browser εμφανίζει μία ιστοσελίδα;
Όλες οι ιστοσελίδες περιέχουν οδηγίες, ο web browser εμφανίζει την ιστοσελίδα διαβάζοντας αυτές τις οδηγίες. Οι πιο κοινές οδηγίες είναι οι ετικέτες HTML(δείτε τα μαθήματα HTML).

 

Τι είναι ένας Web Server?
Για να δημοσιεύσουμε την ιστοσελίδα σας, θα πρέπει να την αντιγράψουμε σε έναν web server και να καταχωρίσουμε το όνομα της ιστοσελίδας μας(domain).

 

Ας δούμε πως μπορούμε να αποθηκεύσουμε την ιστοσελίδα μας και να έχουμε το δικό μας όνομα στο ΠΣΔ(δωρεάν για εκπαιδευτικούς και σχολικές μονάδες). Θα χρειαστούμε δύο προγράμματα, ένα απλό κειμενογράφο για την επεξεργασία του κώδικα της ιστοσελίδας μας, σας προτείνω το Notepad++, και ένα πρόγραμμα για την μεταφορά της ιστοσελίδας μας από τον υπολογιστή μας στο web server, σας προτείνω το filezilla.

 

1. Αν δεν έχετε, ανοίξτε λογαριασμό στο ΠΣΔ.
%ce%ba%ce%b1%cf%84%ce%b1%ce%b3%cf%81%ce%b1%cf%86%ce%ae1

 

2. Δημιουργείστε ένα φάκελο στον υπολογιστή σας(myweb). Ανοίξτε το Notepad++ και γράψτε στην πρώτη γραμμή <!DOCTYPE html> (δηλώνουμε την HTML), επιλέξτε και αντιγράψτε τον κώδικα της ιστοσελίδας που έχουμε αποθηκεύσει στο codepen.io και επικολλήσετε τον κώδικα κάτω από τη γραμμή που γράψατε. Αποθηκεύστε το αρχείο στο φάκελο με το όνομα index.html(όνομα αρχικής ιστοσελίδας).

capture5

3. Συνδεθείτε στο λογαριασμό σας στο ΠΣΔ, και επιλέξτε MySch > Πίνακας Ελέγχου > Στοιχεία δικτυακού τόπου. Μπορείτε να δείτε την Διεύθυνση δικτυακού τόπου(http://users.sch.gr/το όνομα σας) και το FTP url(users.sch.gr/το όνομα σας).

capture1

4. Ανοίξτε τον filezilla επιλέξτε τον Διαχειριστή τοποθεσιών για να δηλώσετε τον web server του ΠΣΔ. Πατήστε ‘Νέα τοποθεσία’, δηλώστε τα στοιχεία όπως φαίνονται στην παρακάτω εικόνα και πατήστε ‘Σύνδεση’.

capture6

5. Στο αριστερό παράθυρο βρίσκονται τα αρχεία του υπολογιστή σας και στο δεξί τα αρχεία του web server. Βρείτε το φάκελο σας στο αριστερό παράθυρο επιλέξτε το αρχείο index.html και κάντε διπλό κλικ για να σταλεί στον web server. Συγχαρητήρια, μόλις ανεβάσατε την πρώτη ιστοσελίδα σας, μπορείτε να τη δείτε στην διεύθυνση ‘http://users.sch.gr/το όνομα σας’.

capture3