Τι είναι JavaΣενάριο; Εισαγωγή με παράδειγμα Hello World
⚡ Έξυπνη Σύνοψη
JavaΤο Script είναι η γλώσσα προγραμματισμού που κάνει τις ιστοσελίδες διαδραστικές. Αυτή η εισαγωγή εξηγεί τι JavaΤο σενάριο είναι, από πού προήλθε, πώς το εκτελούν τα προγράμματα περιήγησης και το Node.js και πώς να γράψετε και να εκτελέσετε ένα πρώτο σενάριο Hello World.

Τι είναι JavaΓραφή;
JavaΤο Script είναι μια γλώσσα προγραμματισμού υψηλού επιπέδου που προσθέτει συμπεριφορά σε ιστοσελίδες. Είναι μία από τις τρεις βασικές τεχνολογίες του ιστού: η HTML παρέχει τη δομή, η CSS παρέχει την εμφάνιση και JavaΤο σενάριο παρέχει την αλληλεπίδραση. Κάθε φορά που ένα πλαίσιο αναζήτησης εμφανίζει προτάσεις καθώς πληκτρολογείτε, μια διαφάνεια φωτογραφιών ή μια φόρμα εγγραφής σας προειδοποιεί για ένα πεδίο που λείπει, JavaΤο σενάριο κάνει αυτή τη δουλειά στο παρασκήνιο.
Το παρακάτω διάγραμμα δείχνει πώς ένα σενάριο τοποθετείται δίπλα στο markup μιας συνηθισμένης ιστοσελίδας.
Για το μεγαλύτερο μέρος της ζωής του JavaΤο script περιγράφηκε ως γλώσσα προγραμματισμού από την πλευρά του πελάτη, επειδή εκτελούνταν μόνο μέσα σε ένα πρόγραμμα περιήγησης. Αυτή η περιγραφή είναι πλέον ελλιπής. Από την εμφάνιση του Node.js το 2009, η ίδια γλώσσα έχει επίσης υποστηρίξει διακομιστές ιστού, βοηθητικά προγράμματα γραμμής εντολών, εφαρμογές επιφάνειας εργασίας και εφαρμογές για κινητά. Μια πιο ακριβής περιγραφή σήμερα είναι ότι JavaΤο Script είναι μια γλώσσα γενικής χρήσης με ασυνήθιστα ισχυρή παρουσία στο πρόγραμμα περιήγησης.
Τα χαρακτηριστικά που προσδιορίζουν τη γλώσσα είναι:
- Δυναμικά πληκτρολογημένο: Μια μεταβλητή μπορεί να περιέχει έναν αριθμό τώρα και μια συμβολοσειρά λίγο αργότερα, επομένως οι τύποι ελέγχονται κατά την εκτέλεση του προγράμματος.
- Ερμηνευμένο και συνταχθείσα την κατάλληλη στιγμή: Μηχανές όπως το V8 στο Chrome και το Node.js μεταγλωττίζουν κώδικα που εκτελείται συχνά σε κώδικα μηχανής για ταχύτητα.
- Πολυπαραδειγματικό: Υποστηρίζονται όλα τα προστακτικά, λειτουργικά και αντικειμενοστρεφή στυλ.
- Καθοδηγούμενο από συμβάντα: Ο κώδικας αντιδρά σε κλικ, πληκτρολογήσεις, χρονοδιακόπτες και απαντήσεις δικτύου αντί να εκτελείται από πάνω προς τα κάτω και να σταματάειping.
- Μονόκλωνο με βρόχο συμβάντων: Η αργή εργασία, όπως μια κλήση δικτύου, μπαίνει στην ουρά αντί να παγώνει η σελίδα.
💡 Συμβουλές: JavaΤο Script και το ECMAScript δεν είναι ανταγωνιστικές γλώσσες. Το ECMAScript είναι η γραπτή προδιαγραφή και JavaΤο script είναι η υλοποίηση αυτής της προδιαγραφής που στην πραγματικότητα παρέχουν τα προγράμματα περιήγησης και το Node.js.
Ιστορία του JavaΓραφή
Ο Μπρένταν Άιχ δημιούργησε JavaΣενάριο στην Netscape Communications το 1995, με αποτέλεσμα την παραγωγή του πρώτου λειτουργικού πρωτοτύπου σε περίπου δέκα ημέρες. Εσωτερικά, το έργο ονομαζόταν Καφές της μέκας. Κυκλοφόρησε σε μια beta έκδοση του Netscape Navigator 2.0 ως LiveScript τον Σεπτέμβριο του 1995 και μετονομάστηκε JavaΓραφή τον Δεκέμβριο του 1995 ως μέρος μιας συμφωνίας μάρκετινγκ μεταξύ της Netscape και της Sun Microsystems, της εταιρείας που κατείχε Java κατά τη χρονική στιγμή.
Αυτή η μετονομασία είναι ο μόνος λόγος που τόσοι πολλοί αρχάριοι εξακολουθούν να υποθέτουν JavaΤο Script είναι μια ελαφριά έκδοση του JavaΟι δύο γλώσσες δεν σχετίζονται μεταξύ τους ως προς τον σχεδιασμό, την ιδιοκτησία και τον χρόνο εκτέλεσης. Η Netscape υπέβαλε τη γλώσσα στην Ecma International το 1996 και η πρώτη έκδοση του προτύπου ECMA-262 δημοσιεύθηκε τον Ιούνιο του 1997. Ο παρακάτω πίνακας παραθέτει τα ορόσημα που έχουν τη μεγαλύτερη σημασία κατά την ανάγνωση παλαιότερου κώδικα.
| Έτος | Milestone | Γιατί έχει σημασία |
|---|---|---|
| 1995 | Μόκα, μετά LiveScript, μετά JavaΓραφή | Η γλώσσα δημιουργήθηκε στο Netscape από τον Brendan Eich. |
| 1997 | ECMA-262 πρώτη έκδοση | Η γλώσσα αποκτά ένα γραπτό πρότυπο ουδέτερο από τον προμηθευτή. |
| 2009 | ES5 και η πρώτη έκδοση του Node.js | Έρχεται η αυστηρή λειτουργία και JavaΤο σενάριο διαφεύγει από το πρόγραμμα περιήγησης. |
| 2015 | ES6 (ECMAScript 2015) | Προστίθενται οι let, const, οι συναρτήσεις arrow, οι κλάσεις, οι ενότητες και οι υποσχέσεις. |
| 2016 και μετά | Ετήσιες εκδόσεις ECMAScript | Μικρότερες λειτουργίες κυκλοφορούν κάθε Ιούνιο αντί για σπάνιες μεγάλες κυκλοφορίες. |
Λόγω του ετήσιου κύκλου κυκλοφορίας, ο κώδικας που γράφτηκε πριν από το 2015 φαίνεται αισθητά διαφορετικός από τον σύγχρονο κώδικα. Τα παλαιότερα tutorials χρησιμοποιούν var παντού, ενώ ο τρέχων κώδικας προτιμά let και const πότε δηλώνοντας μεταβλητές σε JavaΓραφή.
Τι είναι JavaΣε ποιο σενάριο χρησιμοποιείται;
JavaΤο σενάριο δεν περιορίζεται πλέον σε μικρά κόλπα σελίδων. Η ίδια σύνταξη εμφανίζεται πλέον σε τέσσερα πολύ διαφορετικά σημεία, γι' αυτό και κατατάσσεται σταθερά ως μία από τις πιο ευρέως χρησιμοποιούμενες γλώσσες στις έρευνες προγραμματιστών.
| Περιοχή | Τι JavaΤο σενάριο κάνει εκεί | Τυπικά εργαλεία |
|---|---|---|
| Προεπισκόπηση προγράμματος περιήγησης | Διαχειρίζεται τα κλικ, ενημερώνει τη σελίδα χωρίς επαναφόρτωση, επικυρώνει φόρμες και σχεδιάζει γραφήματα. | React, Vue, Angular, Svelte |
| Πλευρά του διακομιστή | Εξυπηρετεί αιτήματα HTTP, επικοινωνεί με βάσεις δεδομένων και δημιουργεί REST ή GraphQL APIs. | Node.js, Deno, Bun, Express |
| Κινητές εφαρμογές | Χτίζει Android και εφαρμογές iOS από μία μόνο κοινόχρηστη βάση κώδικα. | React Native, Ionic, Πυκνωτής |
| Εφαρμογές επιφάνειας εργασίας | Αναδιπλώνει μια διεπαφή ιστού σε ένα εγγενές παράθυρο με πρόσβαση στο σύστημα αρχείων. | Ηλεκτρόνιο, Ταύρος |
| Εργαλεία και αυτοματοποίηση | Συνδυάζει στοιχεία, εκτελεί σουίτες δοκιμών και καθοδηγεί προγράμματα περιήγησης για ολοκληρωμένες δοκιμές. | Vite, webpack, Jest, θεατρικός συγγραφέας |
Τα παιχνίδια, οι απεικονίσεις δεδομένων, οι επεκτάσεις του προγράμματος περιήγησης και τα μικρά έργα υλικού βασίζονται επίσης σε αυτό. Για έναν αρχάριο, η πρακτική συνέπεια είναι απλή: η προσπάθεια που καταβάλλετε στη σύνταξη μεταφέρεται τώρα απευθείας στην εργασία διακομιστή, στην εργασία για κινητά και στον αυτοματισμό δοκιμών αργότερα. Αν θέλετε να δείτε τη γλώσσα να εφαρμόζεται σε πραγματικά προβλήματα, εργαστείτε σε ένα σύνολο πρακτικός JavaΠαραδείγματα κώδικα σεναρίου μόλις τα βασικά είναι άνετα.
Τρόπος εκτέλεσης JavaΓραφή;
JavaΤο σενάριο δεν εκτελείται μόνο του. Χρειάζεται ένα περιβάλλον κεντρικού υπολογιστή που περιέχει ένα JavaΓραφή κινητήραςΤα Chrome και Edge χρησιμοποιούν V8, Firefox χρησιμοποιεί το SpiderMonkey και το Safari χρησιμοποιεί το JavaScriptCore. Όταν ένα πρόγραμμα περιήγησης κατεβάζει μια σελίδα HTML και βρίσκει ένα σενάριο, το παραδίδει στη μηχανή του, η οποία το αναλύει, το μεταγλωττίζει και το εκτελεί.
Το δεύτερο περιβάλλον φιλοξενίας είναι το Node.js, το οποίο ενσωματώνει την ίδια μηχανή V8 εκτός του προγράμματος περιήγησης. Έτσι εκτελείται η ίδια γλώσσα σε έναν διακομιστή ή σε ένα τερματικό. Το πρακτικό πλεονέκτημα του JavaΤο σενάριο είναι αυτό κάθε σύγχρονο πρόγραμμα περιήγησης το υποστηρίζει on Windows, Linux και macOS, επομένως σπάνια χρειάζεται να ανησυχείτε για το ποιο πρόγραμμα περιήγησης χρησιμοποιεί ένας επισκέπτης. Αυτή είναι μια πραγματική βελτίωση σε σχέση με το VBScript, το οποίο λειτουργούσε μόνο στον Internet Explorer σε Windows και πλέον έχει καταργηθεί μαζί με τον ίδιο τον Internet Explorer.
⚠️ Προειδοποίηση: πρόγραμμα περιήγησης JavaΣενάριο και Node.js JavaΤα σενάρια μοιράζονται την βασική γλώσσα αλλά όχι τα γύρω αντικείμενα. document και window υπάρχουν μόνο στο πρόγραμμα περιήγησης και require και οι ενότητες του συστήματος αρχείων υπάρχουν μόνο στο Node.js. Η αντιγραφή κώδικα μεταξύ των δύο χωρίς έλεγχο θα προκαλέσει σφάλμα αναφοράς.
Εργαλεία που χρειάζεστε
Χρειάζεστε ένα πρόγραμμα επεξεργασίας κειμένου για να γράψετε κώδικα και ένα πρόγραμμα περιήγησης για να δείτε το αποτέλεσμα. Notepad++, Visual Studio Code, Sublime Textκαι οποιοσδήποτε άλλος επεξεργαστής με τον οποίο είστε εξοικειωμένοι θα κάνει τη δουλειά, αν και ένας επεξεργαστής με επισήμανση σύνταξης και αντιστοίχιση αγκυλών θα σας γλιτώσει από μεγάλο μέρος της διαδικασίας εντοπισμού σφαλμάτων. Οποιοδήποτε τρέχον πρόγραμμα περιήγησης λειτουργεί: Google Chrome, Firefox, Microsoft Edgeή Safari. Δεν χρειάζεται να αγοράσετε ή να εγκαταστήσετε τίποτα πέρα από αυτά τα δύο στοιχεία.
Ενα απλό JavaΠρόγραμμα σεναρίου
Εάν συνεχίσετε JavaΣενάριο μέσα στο ίδιο το έγγραφο HTML, όλος ο κώδικας πρέπει να βρίσκεται ανάμεσα σε ένα άνοιγμα <script> ετικέτα και ένα κλείσιμο </script> ετικέτα. Έτσι ξεχωρίζει ο κώδικάς σας από την περιβάλλουσα σήμανση. Οι παλαιότερες σελίδες ορίζουν επίσης ένα type χαρακτηριστικό, γραμμένο ως <script type="text/javascript">, το οποίο ήταν απαραίτητο όταν υπήρχαν ανταγωνιστικές γλώσσες-πελάτες όπως η VBScript. Οι σύγχρονες σελίδες το παραλείπουν, επειδή η HTML5 αντιμετωπίζει text/javascript ως προεπιλογή. Οι δύο παρακάτω εκδόσεις είναι λειτουργικά πανομοιότυπες και εξακολουθούν να ισχύουν.
Γεια σας World παράδειγμα
Το παραδοσιακό πρώτο πρόγραμμα εμφανίζει ένα μήνυμα. Τοποθετήστε την ακόλουθη σήμανση σε ένα αρχείο με όνομα hello.html και ανοίξτε το σε ένα πρόγραμμα περιήγησης.
<html>
<head>
<title>My First JavaScript code!!!</title>
<script type="text/javascript">
alert("Hello World!");
</script>
</head>
<body>
</body>
</html>
Παραγωγή:
A browser dialog box opens containing the text: Hello World!
Σημείωση: type="text/javascript" δεν είναι απαραίτητο στην HTML5. Ο ακόλουθος κώδικας λειτουργεί ακριβώς με τον ίδιο τρόπο.
<html>
<head>
<title>My First JavaScript code!!!</title>
<script>
alert("Hello World!");
</script>
</head>
<body>
</body>
</html>
Παραγωγή:
A browser dialog box opens containing the text: Hello World!
Μόλις μια σελίδα ξεπεράσει τις λίγες γραμμές, το σενάριο μετακινείται στο δικό του .js Το αρχείο διατηρεί την σήμανση αναγνώσιμη και επιτρέπει στο πρόγραμμα περιήγησης να αποθηκεύει τον κώδικα στην προσωρινή μνήμη. Οι διαφορές καλύπτονται λεπτομερώς σε αυτήν τη σύγκριση των εσωτερικός και εξωτερικός JavaΓραφή.
Πώς να γράψετε και να εκτελέσετε το πρώτο σας σενάριο
Υπάρχουν τρεις πρακτικοί τρόποι για να το εκτελέσετε JavaScript, και ένας αρχάριος θα πρέπει να δοκιμάσει και τα τρία, επειδή το καθένα ταιριάζει σε διαφορετική περίπτωση.
1. Η κονσόλα του προγράμματος περιήγησης. Αυτή είναι η πιο γρήγορη επιλογή και δεν απαιτεί καθόλου αρχεία. Ανοίξτε οποιαδήποτε ιστοσελίδα, πατήστε F12 (ή Ctrl+Shift+Εγώ ενεργοποιημένο Windows και Linux, Cmd+Option+I ενεργοποιημένο macOSκαι επιλέξτε το πρόξενος καρτέλα. Πληκτρολογήστε μια γραμμή, πατήστε Enter και το αποτέλεσμα εμφανίζεται αμέσως. Είναι το ιδανικό μέρος για να δοκιμάσετε μια μεμονωμένη παράσταση ή για να ελέγξετε τι επιστρέφει μια συνάρτηση.
// Type each line into the browser console and press Enter console.log(2 + 2); console.log("Guru" + 99); console.log(Math.max(4, 12, 7)); console.log(typeof "hello");
Παραγωγή:
4 Guru99 12 string
Παρατηρήστε τη δεύτερη γραμμή. Προσθέτοντας τον αριθμό 99 στη συμβολοσειρά "Guru"παράγει τη συμβολοσειρά"Guru99” αντί για σφάλμα, επειδή JavaΤο σενάριο μετατρέπει αυτόματα τον αριθμό σε κείμενο. Αυτή η συμπεριφορά είναι βολική και αποτελεί επίσης μια κλασική πηγή σφαλμάτων για αρχάριους.
2. Ένα αρχείο HTML. Αυτό είναι το παράδειγμα του Hello World που φαίνεται παραπάνω. Χρησιμοποιήστε το κάθε φορά που ο κώδικας πρέπει να αγγίξει την ίδια τη σελίδα, για παράδειγμα διαβάζοντας μια τιμή φόρμας ή αλλάζοντας ένα στοιχείο.
3. Node.js από το τερματικό. Εγκαταστήστε το Node.js, αποθηκεύστε τον κώδικα σε ένα αρχείο με ένα .js επέκταση, στη συνέχεια εκτελέστε node first-script.jsΤίποτα δεν αποδίδει, άρα console.log γίνεται το κανάλι εξόδου σας. Αυτή είναι η διαδρομή που πρέπει να ακολουθήσετε όταν θέλετε να εξασκηθείτε σε χαρακτηριστικά καθαρής γλώσσας χωρίς HTML γύρω τους.
// first-script.js const language = "JavaScript"; const createdBy = "Brendan Eich"; const releaseYear = 1995; console.log(language + " was created by " + createdBy + " in " + releaseYear + "."); const usedFor = ["Interactive web pages", "Server apps with Node.js", "Mobile apps"]; usedFor.forEach(function (item, index) { console.log(index + 1 + ". " + item); });
Παραγωγή:
JavaScript was created by Brendan Eich in 1995. 1. Interactive web pages 2. Server apps with Node.js 3. Mobile apps
Αυτό το σύντομο σενάριο χρησιμοποιεί ήδη τρεις ιδέες που θα συναντάτε συνεχώς: σταθερές που δηλώνονται με const, μια παράταξη που περιέχει μια λίστα τιμών και μια συνάρτηση επανάκλησης που διαβιβάζεται σε forEachΞαναγράφοντας τον ίδιο βρόχο με ένα for η δήλωση είναι μια χρήσιμη άσκηση αφού μελετήσετε βρόχους μέσα JavaΓραφή.
JavaΣενάριο εναντίον Java
Τα ονόματα αποτελούν το μεγαλύτερο ατύχημα στην ιστορία του προγραμματισμού και η σύγχυση που προκαλούν αξίζει να ξεκαθαριστεί νωρίς. JavaΤο Script μετονομάστηκε από LiveScript καθαρά για λόγους μάρκετινγκ το 1995, σε μια στιγμή που Java ήταν η πιο πολυσυζητημένη τεχνολογία στο διαδίκτυο. Οι δύο γλώσσες σχεδιάστηκαν από διαφορετικά άτομα, σε διαφορετικές εταιρείες, για διαφορετικά προβλήματα.
| Άποψη | JavaΓραφή | Java |
|---|---|---|
| Δημιουργήθηκε από τον | Μπρένταν Άιχ στο Netscape, 1995 | Τζέιμς Γκόσλινγκ στην Sun Microsystems, 1995 |
| Typing | Δυναμικό και αδύναμα τυπογραφημένο | Στατικό και έντονα τυπογραφικό |
| Τρέχει | Μηχανές περιήγησης και Node.js | The Java Εικονική μηχανή |
| Συλλογή | Just-in-time μεταγλωττισμένο από τη μηχανή κατά τον χρόνο εκτέλεσης | Μεταγλωττίστηκε εκ των προτέρων σε bytecode |
| Μοντέλο αντικειμένου | Βασισμένο σε πρωτότυπο, με σύνταξη κλάσης που προστέθηκε στο ES6 | Βασισμένο σε τάξη από την αρχή |
| Παράταση αρχείου | . Js | Το .java μεταγλωττίστηκε σε .class |
| Κοινή χρήση | Προεκτάσεις ιστού, API, εργαλεία | Επιχειρηματικά back-ends, Android, μεγάλα δεδομένα |
Η μόνη πραγματική ομοιότητα είναι ότι και οι δύο δανείζονται σύνταξη με αγκίστρια από την C. Η εκμάθηση της μίας δεν σας διδάσκει την άλλη, αν και η κοινή σύνταξη κάνει τη δεύτερη γλώσσα ελαφρώς πιο εύκολη στην ανάγνωση. Αν είναι αυστηρή η τυπολογίαping σας κάνει έκκληση, TypeScript προσθέτει ένα επίπεδο στατικού τύπου πάνω από JavaΣενάριο κατά τη μεταγλώττιση σε απλό επίπεδο JavaΣενάριο, και οι διαφορές παρατίθενται σε αυτό TypeScript και JavaΣύγκριση σεναρίων.
Με τα βασικά στη θέση τους, τα φυσικά επόμενα βήματα είναι διαδραστικό JavaΑσκήσεις σεναρίου, Τότε μεταβλητές και τύποι δεδομένων, Ακολουθούμενη από συστοιχίες και βρόχους. Μετά από αυτό, αντικειμενοστραφής JavaΓραφή εξηγεί πώς τα αντικείμενα, τα πρωτότυπα και οι κλάσεις ταιριάζουν μεταξύ τους, και μορφοποίηση συμβολοσειρών Καλύπτει τον χειρισμό κειμένου που θα χρησιμοποιείτε σχεδόν σε κάθε σενάριο.


