Firefox, Smart Keywords και JavaScript

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Firefox, Smart Keywords και JavaScript

Δημοσίευση από skeftomilos » 25 Μάιος 2005 07:18

Μία ασυνήθιστη και μάλλον άγνωστη δυνατότητα του Firefox είναι τα Smart Keywords. Είναι ένας απλός και εύκολος τρόπος αναζήτησης στο Web μέσω της Location Bar. Έστω για παράδειγμα ότι κάνουμε συχνά αναζητήσεις στη Wikipedia. Αντί να πηγαίνουμε πρώτα στο site για να κάνουμε αναζήτηση, μπορούμε από οπουδήποτε βρισκόμαστε να γράψουμε στη Location Bar wp machiavelli, και αμέσως θα εμφανιστούν τα αποτελέσματα της αναζήτησης για τον Niccolo Machiavelli. Στο παράδειγμα αυτό η μαγική λέξη είναι η wp. Ο Firefox διαθέτει μερικά προεγκατεστημένα Smart Keywords όπως google και dict (εξαρτάται από την έκδοση του Firefox που έχουμε), αλλά μπορούμε πολύ εύκολα να φτιάξουμε και δικά μας. Να σημειωθεί ότι ο Opera 8.0 απέκτησε μία παρόμοια δυνατότητα που την ονομάζει Integrated search.

Θα δούμε τώρα τον τρόπο δημιουργίας ενός Smart Keyword. Θα φτιάξουμε ένα Keyword για να κάνουμε αναζητήσεις στο FreeStuff, και η μαγική λέξη θα είναι fs. Αν κοιτάξετε στο κάτω μέρος της σελίδας θα δείτε ότι υπάρχει ένα πεδίο αναζήτησης. Δεξιά υπάρχουν δύο επιλογές: στο freestuff.gr και στο Web. Επιλέγουμε την πρώτη. Μετά κάνουμε δεξί κλικ ακριβώς πάνω στο πεδίο της αναζήτησης:

Εικόνα

Επιλέγουμε Add a Keyword for this Search...

Εικόνα

Εμφανίστηκε ένα παράθυρο διαλόγου με το όνομα Add Bookmark. Απ' αυτό καταλαβαίνουμε ότι τα Smart Keywords στην πραγματικότητα είναι bookmarks! Η μόνη διαφορά είναι το ειδικό πεδίο "Keyword". Για όνομα του νέου bookmark επιλέγουμε το FreeStuff Quicksearch, για keyword το fs, και τέλος επιλέγουμε Create in: Quick Searches. Πατάμε OK και το Smart Keyword είναι έτοιμο και μπορούμε να το χρησιμοποιήσουμε αμέσως. Π.χ. για να ψάξουμε το αρχείο συζητήσεων του FreeStuff για τη λέξη Usability, γράφουμε στη Location Bar fs usability:

Εικόνα

Όλα τα bookmarks που λειτουργούν ως Smart Keywords βρισκονται στο φάκελο Quick Searches. Ας τον ανοίξουμε για να δούμε τι υπάρχει διαθέσιμο. Από το μενού επιλέγουμε: Bookmarks - Manage Bookmarks...

Εικόνα

Μέχρι εδώ εξετάσαμε το χρηστικό μέρος της υπόθεσης. Ας αρχίσουμε τώρα να σκαλίζουμε λίγο περισσότερα τις τεχνικές λεπτομέρειες για να δούμε αν τα Smart Keywords μπορούν να βρουν και άλλες χρήσεις. Αν κοιτάξουμε το ειδικό bookmark του Google, θα δούμε ότι στο πεδίο Location έχει την τιμή:

http://www.google.com/search?q=%s

Είναι ένα σχεδόν κανονικό URL. Το μόνο παράξενο είναι το σύμβολο %s στο τέλος. Αυτό το σύμβολο είναι το placeholder που όταν κάνουμε χρήση του keyword θα αντικατασταθεί με τη λέξη προς αναζήτηση. Για παράδειγμα αν γράψουμε στη Location Bar: google greasemonkey, μόλις πατήσουμε Enter η διεύθυνση θα αντικατασταθεί με το:

http://www.google.com/search?q=greasemonkey

Όπως βλέπουμε ο μηχανισμός είναι πολύ απλός, και θα μπορούσαμε να συμπληρώσουμε μόνοι μας τα πεδία ενός ειδικού bookmark χωρίς άλλη βοήθεια από τον Firefox. Βέβαια ο τρόπος με το δεξί κλικ στα πεδία αναζήτησης παραείναι πρακτικός για να τον αγνοήσουμε. Τι γίνεται όμως αν γράψουμε δύο ή περισσότερες λέξεις μαζί με το Smart Keyword? Χρειαζόμαστε περισσότερα placeholders? Όχι, ο Firefox μεταφέρει όλες τις λέξεις στο πρώτο placeholder, και αδιαφορεί αν έχουμε προσθέσει περισσότερα. Π.χ. αν γράψουμε google black holes θα πάρουμε το παρακάτω URL:

http://www.google.com/search?q=black%20holes

Οι browsers είναι φυσικά χρήσιμοι όταν είμαστε συνδεδεμένοι στο Internet, αλλά τίποτα δε μας εμποδίζει να τους χρησιμοποιούμε και χωρίς σύνδεση. Υπάρχει ένας περιορισμένος αριθμός εφαρμογών που μπορούν λειτουργήσουν ικανοποιητικά με έναν browser, και η γλώσσα προγραμματισμού που χρησιμοποιούν είναι βέβαια η JavaScript! Αν κοιτάξουμε την ιστορία του Internet, θα δούμε ότι περίπου μία δεκαετία νωρίτερα η Netscape είχε οραματιστεί την αντικατάσταση του λειτουργικού συστήματος από το δικό της browser. Ξέρουμε ότι τελικά απέτυχε, και ένας λόγος ήταν οι εγγενείς περιορισμοί πρόσβασης της JavaScript στους πόρους ενός PC. Αυτό όμως δε σημαίνει ότι μας απαγορεύει κανείς να φτιάξουμε προγραμματάκια που να τρέχουν στον browser, αρκεί μόνο οι συνθήκες να είναι ευνοϊκές. Μία τέτοια ευνοϊκή περίπτωση είναι ένα πρόγραμμα επεξήγησης αρκτικόλεξων που έφτιαξα πριν λίγο καιρό. Το πρόγραμμα είναι πολύ απλό όπως μπορείτε να δείτε:

Εικόνα

Ο χρήστης πληκτρολογεί ένα αρκτικόλεξο, πατάει "Go" και αμέσως μαθαίνει την απάντηση (αν υπάρχει). Είναι μάλιστα φανερό ότι το πρόγραμμα μπορεί να ωφεληθεί από τα Smart Keywords. Όρισα ως keyword τη λέξη acro ώστε να μπορώ να το τρέχω χωρίς να ψάχνω να το βρω στο Start Menu. Ανοίγω τον browser (συνήθως είναι ανοιχτός έτσι κι αλλιώς) και γράφω στη Location Bar acro <αρκτικόλεξο> για να έχω αμέσως την απάντηση. Αλλά ας ρίξουμε μια ματιά στο πρόγραμμα:

Κώδικας: Επιλογή όλων

<html>
  <head>
    <title>Acronyms</title>
    <script type="text/javascript">

      window.onload = function&#40;&#41; &#123;
        var text = location.querystring&#40;"abbr"&#41;
        if &#40;text&#41; search&#40;text&#41;
        document.getElementById&#40;"abbr"&#41;.select&#40;&#41;
      &#125;

      location.querystring = function&#40;key&#41; &#123;
        if &#40;this.search&#41; &#123;
          var re = new RegExp&#40;"&#91;\\?&&#93;" + key + "=&#40;&#91;^\\?&#93;*?&#41;&#40;?&#58;&|$&#41;&#91;^\\?&#93;*$" ,"i"&#41;
          var match = unescape&#40;this.search&#41;.match&#40;re&#41;
          if &#40;match&#41; return unescape&#40;match&#91;1&#93;.replace&#40;/\+/g, " "&#41;&#41;
        &#125;
      &#125;

      function search&#40;abbr&#41; &#123;
        abbr = abbr.match&#40;/^\s*&#40;.*?&#41;\s*$/&#41;&#91;1&#93;
        var re_entries = new RegExp&#40;"#" + abbr + ";.*?#", "gi"&#41;
        var matches = acronyms_data.match&#40;re_entries&#41;
        if &#40;matches&#41; &#123;
          var re_entry = new RegExp&#40;"#&#40;.*?&#41;;&#40;.*?&#41;#", "i"&#41;
          var s = ""
          for&#40;var i = 0; i < matches.length; i++&#41; &#123;
            var match = matches&#91;i&#93;.match&#40;re_entry&#41;
            abbr = match&#91;1&#93;
            s += match&#91;1&#93; + " &#58; " + match&#91;2&#93; + "<br>"
          &#125;
          document.getElementById&#40;"result"&#41;.innerHTML = s
        &#125; else &#123;
          document.getElementById&#40;"result"&#41;.innerHTML = abbr + " &#58; Δε βρέθηκε"
        &#125;
        document.getElementById&#40;"abbr"&#41;.value = abbr
        document.getElementById&#40;"abbr"&#41;.select&#40;&#41;
      &#125;

      var acronyms_data = "#API;Application Programming Interface#PHP;Personal Home Pages#"

    </script>
  </head>
  <body>
    <h2>Acronyms</h2>
    <form>
      Search for &#58;
      <input type="text" name="abbr" id="abbr">
      <input type="button" value="Go" onClick="search&#40;this.form.abbr.value&#41;"><br><br>
      <span id="result"></span>
    </form>
  </body>
</html>
Η πρώτη και πιο σημαντική απόφαση που έπρεπε να παρθεί ήταν ο τρόπος αποθήκευσης των αρκτικόλεξων. Με τη JavaScript δεν έχουμε την πολυτέλεια μίας σχεσιακής βάσης δεδομένων (π.χ. Access), και είμαστε υποχρεωμένοι να αρκεστούμε στις δυνατότητες της ίδιας της γλώσσας. Μετά από κάμποσο ψάξιμο των εναλλακτικών επιλογών κατέληξα στη λύση του ενός μονοκόμματου και ενιαίου string. Μπορείτε να το δείτε μέσα στον κώδικα:

Κώδικας: Επιλογή όλων

var acronyms_data = "#API;Application Programming Interface#PHP;Personal Home Pages#"
Κάθε αρκτικόλεξο συνοδεύεται από την εξήγησή του και ξεχωρίζει απ' αυτήν με το χαρακτήρα ";". Τα ζεύγη χωρίζονται μεταξύ τους με το χαρακτήρα "#". Επέλεξα τους χαρακτήρες διαχωρισμού αφού πρώτα βεβαιώθηκα ότι απουσίαζαν πλήρως από τη βάση των αρκτικόλεξων που είχα διαθέσιμη (www.acronyms.ch). Το πραγματικό string είναι φυσικά πολύ μεγαλύτερο, αφού περιλαμβάνει περισσότερες από 10.000 εγγραφές. Για την αναζήτηση ενός αρκτικόλεξου μέσα στο μακρύ αυτό string χρησιμοποίησα Regular Expressions. Στη λύση αυτή κατέληξα αφού διαπίστωσα ότι είναι η καλύτερη σε απόδοση από κάθε άλλη διαθέσιμη. Όποιος ενδιαφέρεται γι αυτό το άχαρο τεχνικό θέμα, έχω δημοσιεύσει τα αποτελέσματα των σχετικών μετρήσεων εδώ.

Μόλις φορτωθεί το πρόγραμμα (window.onload) ξεκινά ελέγχοντας το querystring για να δει αν πρέπει να ξεκινήσει αμέσως την αναζήτηση ενός αρκτικόλεξου. Αν το πρόγραμμα ξεκίνησε ως αποτέλεσμα της χρήσης του Smart Keyword acro, το URL θα περιέχει το προς αναζήτηση αρκτικόλεξο:

file:///D:/Scripts/Acronyms/Acronyms.htm?abbr=imho

Για την ανάγνωση του querystring, το αντικείμενο location διαθέτει την ιδιότητα search. Αυτή όμως επιστρέφει ολόκληρο το querystring (εδώ ?abbr=imho) ενώ εμείς θέλουμε μόνο την τιμή της παραμέτρου abbr. Για τη διευκόλυνση της ανάγνωσης των παραμέτρων έχω προσθέσει τη γενικής χρήσης μέθοδο querystring() στο αντικείμενο location.

Κώδικας: Επιλογή όλων

location.querystring = function&#40;key&#41; &#123;
  if &#40;this.search&#41; &#123;
    var re = new RegExp&#40;"&#91;\\?&&#93;" + key + "=&#40;&#91;^\\?&#93;*?&#41;&#40;?&#58;&|$&#41;&#91;^\\?&#93;*$" ,"i"&#41;
    var match = unescape&#40;this.search&#41;.match&#40;re&#41;
    if &#40;match&#41; return unescape&#40;match&#91;1&#93;.replace&#40;/\+/g, " "&#41;&#41;
  &#125;
&#125;
Βλέπετε πόσο εύκολη είναι η προσθήκη μίας μεθόδου σε ένα αντικείμενο. Μέσα στο σώμα της ρουτίνας γίνεται χρήση της ειδικής τιμής this που αναφέρεται στο τρέχον αντικείμενο, το location στην προκειμένη περίπτωση. Η εξαγωγή της τιμής ενός κλειδιού γίνεται με χρήση μίας αρκούντως περίπλοκης Regular Expression. Στο παραπάνω παράδειγμα η έκφραση location.querystring("abbr") επιστρέφει το string "imho".

Η ρουτίνα που κάνει την αναζήτηση είναι η search. Είναι κάπως περίπλοκη γιατί υπάρχει περίπτωση ένα αρκτικόλεξο να έχει περισσότερες από μία ερμηνείες, και θέλουμε να τις εμφανίσουμε όλες. Περιέχει τρεις Regular Expressions. Η πρώτη απλά αφαιρεί από το αρκτικόλεξο πιθανά κενά από την αρχή και το τέλος:

Κώδικας: Επιλογή όλων

/^\s*&#40;.*?&#41;\s*$/
Η δεύτερη βρίσκει ζεύγη αρκτικόλεξο - ερμηνεία μέσα στη "βάση δεδομένων" (το string acronyms_data). Αυτή η Regular Expression είναι διαφορετική για κάθε αρκτικόλεξο, και γι αυτό κατασκευάζεται με τον constructor του αντικειμένου RegExp:

Κώδικας: Επιλογή όλων

new RegExp&#40;"#" + abbr + ";.*?#", "gi"&#41;
Η δουλειά της τελευταίας είναι να ξεχωρίσει το αρκτικόλεξο από την ερμηνεία του:

Κώδικας: Επιλογή όλων

new RegExp&#40;"#&#40;.*?&#41;;&#40;.*?&#41;#", "i"&#41;
Το μόνο άλλο ενδιαφέρον από τη ρουτίνα αυτή είναι η χρήση της μεθόδου select() του πεδίου κειμένου, που προκαλεί την επιλογή όλου του κειμένου. Είναι απλά μία ευκολία για να ξεκινήσουμε γρήγορα την επόμενη αναζήτηση.

Ελπίζω να βρείτε χρήσιμο το πρόγραμμα. Εγώ το χρησιμοποιώ καμιά φορά. Όσο για τα Smart Keywords, δυστυχώς τα θυμάμαι όταν είναι πια πολύ αργά!
:)
Συνημμένα
Acronyms.zip
Acronyms.htm (309 ΚΒ)
(104.75 KiB) Μεταφορτώθηκε 849 φορές
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27621
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

Firefox, Smart Keywords και JavaScript

Δημοσίευση από cordis » 25 Μάιος 2005 12:57

Πολύ καλό... tutorialized... :P :P
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

Άβαταρ μέλους
Mundialito
Δημοσιεύσεις: 14
Εγγραφή: 12 Μάιος 2005 17:53

Firefox, Smart Keywords και JavaScript

Δημοσίευση από Mundialito » 27 Μάιος 2005 16:46

Super!

Πολύ χρησιμο!

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες