Υποενότητα 8.3: Καταμέτρηση λέξεων

Site: ΕΛ/ΛΑΚ Moodle
Course: Σχεδιασμός WEB και Παραγωγή Ψηφιακού Περιεχομένου
Book: Υποενότητα 8.3: Καταμέτρηση λέξεων
Printed by: Guest user
Date: Friday, 13 December 2024, 7:31 AM

Description

  • JavaScript word counter

Η ιδέα!

Μια textarea δέχεται την εισαγωγή κειμένου από το πληκτρολόγιο. Θα προσθέσουμε ένα χαρακτηριστικό σε αυτήν την textarea που παρέχει μια κατά προσέγγιση καταμέτρηση των λέξεων που εισάγει ο χρήστης. 

Για να γίνει αυτό επιτυχώς, θα πρέπει να:

  • Δημιουργήστε το δικό σας αρχείο Javascript στον κατάλογο "js" του φακέλου "Exercises". Έχετε ήδη δημιουργήσει αυτόν τον κατάλογο στην άσκηση της υποενότητας  7.1. Καλέστε το "countsTheWords.js".
  •  Προσθέστε  <script> tag στο τέλος του <body> της σελίδας για να φορτωθεί το JavaScript αρχείο.
  • Στο αρχείο js:
    • Χρησιμοποιήστε document.getElementById() για να λάβετε το στοιχείο textarea από τη σελίδα. Θα χρειαστείτε το αναγνωριστικό - id του, το οποίο μπορείτε να βρείτε στη σελίδα HTML.
    • Γράψτε μια συνάρτηση χειρισμού συμβάντων που εκτελείται κάθε φορά που κάποιος πληκτρολογεί στην textarea. Θα φαίνεται κάτι τέτοιο:
      myTextareaElement.onkeyup = function(){
          /* your code goes here*/
      }
    • Θα χρειαστεί να αποκτήσετε πρόσβαση στην ιδιότητα .value της textarea για να πάρετε τα περιεχόμενα ως String
    • Χρησιμοποιήστε string.split() για να διαιρέσετε τη συμβολοσειρά (στα όρια λέξεων) σε μια σειρά από Strings
    • Καταμετρήστε τα στοιχεία στη λίστα. Αυτό θα είναι (κατά προσέγγιση) ο αριθμός των λέξεων 
    • Γράψτε αυτήν την τιμή στο στοιχείο HTML που μοιάζει με αυτό: <span id="wordcount"></span>

Το αρχείο HTML

Αυτό είναι το αρχείο HTML:

Όπως μπορείτε να δείτε, δώσαμε ένα id στην textarea. Επίσης, δώσαμε ένα id σε ένα κενό span. Εδώ θα εμφανιστεί ο αριθμός λέξεων μας χρησιμοποιώντας τη JavaScript.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Word counter </title>
  </head>
  <body>
    <h3> Word counter </h3>
    <textarea id="myWordsToCount" rows="5" cols="60" ></textarea><br>
    The wordcount is: <span id="wordcount"></span><br>
    <script type="text/javascript" src="js/countsTheWords.js"></script>
  </body>
</html>

Άσκηση

  1. Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως exersice08.3.01.html στον φάκελο "Exercises".
  2. Αντιγράψτε τον παραπάνω κώδικα και επικολλήστε τον στο νέο αρχείο.
  3. Αποθηκεύστε το αρχείο. 

Το αρχείο JavaScript

Αυτό είναι το αρχείο JavaScript:

Σε αυτό το παράδειγμα, όσο η μεταβλητή i θα είναι μικρότερη από το μήκος της λίστας, ο κώδικας θα τρέχει.

var myTextareaElement = document.getElementById("myWordsToCount");
myTextareaElement.onkeyup = function(){
  var i=0;
  var sum=0;
  var myValue = document.getElementById("myWordsToCount").value;
  var res = myValue.split(" ");
  while (i<res.length) {
    sum=sum+1;
    i=i+1;
  }
  document.getElementById("wordcount").innerHTML = sum;
  console.log(res, i, res.length);
};

Άσκηση

  1. Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως countsTheWords.js στον φάκελο "Exercises/js".
  2. Αντιγράψτε τον παραπάνω κώδικα και επικολλήστε τον στο νέο αρχείο.
  3. Αποθηκεύστε το αρχείο. Προεπισκοπήστε το αρχείο exersice08.3.01.html. Υπάρχει κάποια διαφορά από το εισαγωγικό βίντεο;

Λύση:

Ναι, ο καταμετρητής αυξάνεται ακόμη και αν πρόσθετοι κενοί χαρακτήρες  εισάγονται στο κείμενο.

Άσκηση

Άσκηση

Επανασχεδιάστε το αρχείο JavaScript, έτσι ώστε να μην υπολογίζονται τα επιπλέον διαδοχικά κενά.

Tip: Η μεταβλητή sum θα πρέπει να αυξάνεται μόνο αν ο εισαγόμενος χαρακτήρας δεν είναι το κενό

Λύση:

var myTextareaElement = document.getElementById("myWordsToCount");
myTextareaElement.onkeyup = function(){
  var i=0;
  sum=0;
  var myValue = document.getElementById("myWordsToCount").value;
  var res = myValue.split(" ");
  while (i<res.length) {
    /* The variable sum increases if the inserted character is not the white space*/
    if (res[i] != "") {
        sum=sum+1;
    }
  i=i+1;
}
document.getElementById("wordcount").innerHTML = sum;
console.log(res, i, res.length);