Print bookPrint book

Υποενότητα 6.2: Απλό αρχείο JavaScript

Site: ΕΛ/ΛΑΚ Moodle
Course: Σχεδιασμός WEB και Παραγωγή Ψηφιακού Περιεχομένου
Book: Υποενότητα 6.2: Απλό αρχείο JavaScript
Printed by: Guest user
Date: Wednesday, 4 December 2024, 10:20 AM

Description

  • JavaScript σε HTML 
  • alert interaction
  • Μεταβλητές - Variables
  • prompt interaction
  • Σχόλια - Comments στην JavaScript
  • Developer tools (console)

Table of contents

Πού γράφουμε JavaScript κώδικα σε HTML αρχείο;

Η JavaScript μπορεί να συνδεθεί στο αρχείο HTML χρησιμοποιώντας τρεις διαφορετικούς τρόπους:

  • Εισαγωγή JavaScript στο head του HTML αρχείου
  • Εισαγωγή JavaScript στο τέλος του body του HTML αρχείου
  • Χρήση εξωτερικού -  external αρχείου και αναφορά του JavaScript αρχείου είτε στο head είτε στο τέλος του body του HTML αρχείου
Μέσα στο HTML αρχείο

Όταν χρησιμοποιούμε τον πρώτο ή τον δεύτερο τρόπο, πρέπει να περικλείσουμε τον κώδικα μέσα στις ετικέτες   <script>.. </script>.

Γενικά, όταν γράφουμε JavaScript απευθείας στο HTML είναι προτιμότερο να τη βάλουμε στο τέλος του body και όχι στο head.  Αυτό συμβαίνει επειδή θέλουμε η σελίδα μας να έχει ολοκληρώσει τη φόρτωση, ώστε να μπορεί να λειτουργήσει σωστά ηJavaScript.

<!DOCTYPE html>
<html>
  <head>
        . . . <script> load JavaScript libraries here </script>. . .
  </head>
  <body>
        . . . <script> your JavaScript code typically goes at the end of body </script>. . .
  </body>
</html>

Εξωτερικό αρχείο - External file

Όταν χρησιμοποιούμε ένα εξωτερικό αρχείο, ΔΕΝ γράφουμε ετικέτες. Γράφουμε μόνο τον κώδικα JavaScript μας. Και πάλι προτιμούμε να αναφέρουμε τη JavaScript στο τέλος του HTML body.

<!DOCTYPE html>
<html>
  <head>
        . . . <script> load JavaScript libraries here </script>. . .
  </head>
  <body>
        . . . <script type="text/javascript" src="js/myscript.js"></script>. . .
  </body>
</html>

Με τους τρεις διαθέσιμους τρόπους, ο 3ος, η χρήση ενός εξωτερικού αρχείου, είναι ο προτιμώμενος τρόπος.

Ένας λόγος για αυτό είναι επειδή, με τον τρόπο αυτό, διαχωρίζουμε την HTML σήμανση από τον JavaScript κώδικα. Επιπλέον, είναι ευκολότερο να διαβάζετε τα αρχεία και να κάνετε αλλαγές. Επίσης, βοηθάει τη φόρτωση σελίδας πιο γρήγορα.

Περισσότερες πληροφορίες: https://www.w3schools.com/js/js_whereto.asp

Το "alert" JavaScript αρχείο

Θα βάλουμε τον ακόλουθο κώδικα στο head του HTML αρχείου:

Είναι η  interaction "alert".

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example of alert()</title>
    <script>
        alert("Hello world");
    </script>
  </head>
  <body>
  </body>
</html>

Αντιγράψτε και επικολλήστε τον κώδικα στον επεξεργαστή κώδικα για να δείτε την έξοδο. Αποθηκεύστε το αρχείο στο φάκελο"temporaryFiles".  Στη συνέχεια, χρησιμοποιήστε τη "Live preview" στο πρόγραμμα επεξεργασίας ή ανοίξτε το αρχείο (Ctrl+O) στον Chrome. 

alert popup

Μεταβλητές. "Prompt" interaction

Τι είναι μια μεταβλητή στη JavaScript;

Μπορείτε να φανταστείτε τις μεταβλητές-variables   ως κουτιά.

Variables as boxes

Μπορείτε να δημιουργήσετε μια μεταβλητή και να βάλετε κάτι σε αυτήν.
Ακριβώς όπως έχετε ένα κουτί και βάζετε κάτι σε αυτό.
Μπορείτε να το πάρετε όποτε θέλετε και να το χρησιμοποιήσετε. Αργότερα μπορείτε να βάλετε κάτι άλλο στο κουτί.

Αυτό ακριβώς κάνουμε με τις μεταβλητές. Χρησιμοποιούμε μεταβλητές όλη την ώρα στο JavaScript, σύντομα να εξοικειωθείτε με αυτές.
Οι μεταβλητές συμβολίζονται με “var” ακολουθούμενο από ένα όνομα της επιλογής σας. Το όνομα εξ ορισμού μπορεί να είναι οτιδήποτε θέλετε. Ωστόσο, γενικά, χρησιμοποιούμε ονόματα που περιγράφουν τις ενέργειές μας.
Τα ονόματα δεν μπορούν να αρχίζουν με αριθμό και διαφοροποιούνται από το αν είναι πεζα ή κεφαλαί. Αυτό σημαίνει ότι η var name δεν είναι ίδια με τη var Name.

Παράδειγμα

Θα χρησιμοποιήσουμε τρία πράγματα, μια μεταβλητή και δύο μεθόδους JavaScript.
Οι μέθοδοι JavaScript είναι ενέργειες που μπορούν να εκτελεστούν σε αντικείμενα. Εδώ θα χρησιμοποιήσουμε τη μέθοδο  prompt() και τη μέθοδο document.write() .

  • Με τη μέθοδο prompt() εμφανίζεται ένα πλαίσιο όπου ο χρήστης εισάγει το κείμενό του.
  • Με τη μέθοδο document.write() μπορούμε να γράψουμε κάτι στο HTML έγγραφο.

Έτσι, σε αυτή την περίπτωση, θα χρησιμοποιήσουμε τη prompt() μαζί με τη document.write() για να καλωσορίσουμε έναν επισκέπτη στη σελίδα μας. Παρατηρήστε ότι χρησιμοποιούμε διπλά εισαγωγικά "" για το κείμενο αλλά όχι για τις μεταβλητές.

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Example of prompt()</title>
   </head>
   <body>
     <h3> Example of prompt()</h3>
     <script>
         var visitorName;
         visitorName = prompt("What is your name?");
         document.write(" Welcome to my page " +visitorName + "!" );
     </script>
   </body>
</html>

Αντιγράψτε και επικολλήστε τον κώδικα στον επεξεργαστή κώδικα για να δείτε την έξοδο. Αποθηκεύστε το αρχείο στο φάκελο"temporaryFiles".  Στη συνέχεια, χρησιμοποιήστε τη "Live preview" στο πρόγραμμα επεξεργασίας ή ανοίξτε το αρχείο (Ctrl+O) στον Chrome.  

Περισσότερες πληροφορίες: https://www.w3schools.com/js/js_variables.asp

Σχόλια στη Javascript

Υπάρχουν δύο τρόποι για να γράψετε σχόλια στον κώδικα JavaScript.
Ο πρώτος τρόπος είναι να χρησιμοποιήσετε  // your comments .

Τα παραπάνω μπορούν να χρησιμοποιηθούν για να σχολιάσουν μόνο μία γραμμή κώδικα. Όλα όσα είναι μεταξύ των δύο ετικετών θα αγνοηθούν από τη JavaScript.

Ο δεύτερος τρόπος είναι να χρησιμοποιήσετε /* your comments */.
Χρησιμοποιούμε αυτό όταν θέλουμε να σχολιάσουμε πολλές γραμμές. Και πάλι, όλα όσα βρίσκονται μεταξύ των δύο ετικετών αγνοούνται από το JavaScript.

Περισσότερες πληροφορίες: https://www.w3schools.com/js/js_comments.asp

Εργαλεία προγραμματιστή Developer tools (console)

Γιατί χρειαζόμαστε την console?

Η console είναι ένα πολύ χρήσιμο εργαλείο για να βρούμε ένα σφάλμα στον κώδικα μας.
Γενικά, στη JavaScript, όπως σε οποιαδήποτε γλώσσα, μπορούμε να κάνουμε σφάλματα σύνταξης. Αυτό συμβαίνει πολύ συχνά ακόμη και σε πολύ έμπειρους προγραμματιστές.

Τα προγράμματα περιήγησης προσπαθούν να αποκρύψουν το σφάλμα. Αυτό συμβαίνει επειδή δεν είναι χρήσιμο στον χρήστη να γνωρίζει ότι υπάρχει ένα σφάλμα.
Ωστόσο, η JavaScript σταματά να τρέχει όταν φτάνει σε ενότητα που περιέχει σφάλμα.

Ως προγραμματιστές, θέλουμε να μάθουμε πού συνέβη το σφάλμα ή το λάθος που έχουμε, για να το διορθώσουμε. Εκεί είναι όπου χρειαζόμαστε την console.

Παράδειγμα 

Αντιγράψτε και επικολλήστε τον κώδικα στον επεξεργαστή κώδικα για να δείτε την έξοδο. Αποθηκεύστε το αρχείο στο φάκελο"temporaryFiles".  Στη συνέχεια, ανοίξτε το αρχείο (Ctrl+O) στον Chrome.  

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example of alert()</title>
    <script>
        alert("Hello world";
    </script>
  </head>
  <body>
  </body>
</html>

Πού μπορούμε να βρούμε την console?

  • Στον  Chrome....
  • Πιέστε το δεξί πλήκτρο του ποντικιού και επιλέξτε  “Inspect”. Επιλέξτε το κουτί “Console”. Είστε πια στην console.

Τι βλέπουμε στον browser?

  • Τίποτα. Το πρόγραμμα περιήγησης κρύβει τα σφάλματα.
  • Χρησιμοποιήστε την κονσόλα στα εργαλεία προγραμματιστή για να εντοπίσετε το σφάλμα.
  • Ποιο είναι το σφάλμα;

Uncaught SyntaxError: missing ) after argument list

Παρατηρήστε ότι η κονσόλα εμφανίζει το αρχείο και τη γραμμή όπου εμφανίζεται το σφάλμα!

  • Διορθώστε το σφάλμα για να λειτουργήσει σωστά ο κώδικας.

Η κονσόλα είναι ένα εκπληκτικά χρήσιμο εργαλείο και μπορείτε να κάνετε διάφορες λειτουργίες μαζί της.
Για παράδειγμα, μεταβείτε στην κονσόλα και γράψτε 5 + 5 ή  alert(“Hi”) και πατήστε Enter. Τι βλέπτε?

Άσκηση

Άσκηση

  1. Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως exersice06.2.html στον φάκελο "Exercises".
  2. Πρέπει να χρησιμοποιήσετε δύο μεταβλητές και δύο prompt() interactions.
  3. Επεξεργαστείτε το αρχείο. Στον browser θα πρέπει να εμφανίζεται η επόμενη εικόνα:

Λύση: