Υποενότητα 6.2: Απλό αρχείο JavaScript
Εργαλεία προγραμματιστή 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. Τι βλέπτε?