Υποενότητα 8.3: Καταμέτρηση λέξεων
| Site: | ΕΛ/ΛΑΚ Moodle |
| Course: | Σχεδιασμός WEB και Παραγωγή Ψηφιακού Περιεχομένου |
| Book: | Υποενότητα 8.3: Καταμέτρηση λέξεων |
| Printed by: | Guest user |
| Date: | Friday, 22 November 2024, 5:40 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>Άσκηση
- Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως
exersice08.3.01.htmlστον φάκελο "Exercises". - Αντιγράψτε τον παραπάνω κώδικα και επικολλήστε τον στο νέο αρχείο.
- Αποθηκεύστε το αρχείο.
Το αρχείο 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);
};Άσκηση
- Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως
countsTheWords.jsστον φάκελο "Exercises/js". - Αντιγράψτε τον παραπάνω κώδικα και επικολλήστε τον στο νέο αρχείο.
- Αποθηκεύστε το αρχείο. Προεπισκοπήστε το αρχείο
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);