SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    An easy task - help needed!

    Hey there!

    I would like some assistance from you guys regarding JavaScript and an easy task which i was assigned with. It's not a school project, by the way. Just something my friend requires and which i thought would be easy to solve. Well, to me it isn't. :-(

    Anyway,

    I need to make a counter-script that recognizes all vowels. Technically by clicking on alert button it would pick all vowels from some random words and print them separately underneath (one another or sequently). Doesn't matter exactly how, but it should pick ALL vowels from some random words.

    How would i proceed with such task? How should i start? Can you give me some functions and/or algorithms i should get to mess with?

    Thank you very much for your help!

    I think it's an easy task for you guys

  2. #2
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not sure if I understand the question correctly, but I guess I would tackle this problem with a regular expression.

  3. #3
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could start by making a function that will extract all the vowels from a string, and return a new string that just contains vowels.

    http://www.w3schools.com/jsref/jsref_obj_string.asp
    By using a for loop, and then length property, and charAt(), you should be able to do it.

  4. #4
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by crmalibu View Post
    You could start by making a function that will extract all the vowels from a string, and return a new string that just contains vowels.

    By using a for loop, and then length property, and charAt(), you should be able to do it.
    Yes, thanks for helping!

    But can you be any more precise? I've got no real experience in programming, so some more concrete help would be appreciated. I'm using Notepad++ by the way. :P

  5. #5
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I won't be writing the code for you, but maybe someone else will.

  6. #6
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am doing this from the top of my head so no guarantees:

    var yourText = "whatever text you need to get the vowels from";
    var pattern = /[a|e|i|o|u]/gi;
    var vowels = yourText.match(pattern);

    Not sure what you want to do with this list of vowels though?

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    The following comes from http://www.ryerson.ca/JavaScript/lec...ers/index.html and can be easily modified to perform what you need.

    But, are you after just a solution, or best practice?

    Code javascript:
    var str = "Hello 2 the World!"
    var chr = ""
    var nVowels = 0
     
    //Counting all the vowels except y.
    for (pos = 0; pos < str.length; pos++){
       chr = str.charAt(pos)
       if (chr == "a" || chr == "e" || chr == "i" || chr == "o" || chr == "u" || 
           chr == "A" || chr == "E" || chr == "I" || chr == "O" || chr == "U") nVowels++
    }
     
    document.write("<P>There were " + nVowels + " vowels.</P>")
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by crmalibu View Post
    I won't be writing the code for you, but maybe someone else will.
    I'll be happy to do so. If it's alright with you LPent I'll make use of the regular expression you provided.

    The first thing to do is to provide a page to receive the text, and to show the results.

    This page includes a noscript part with a suitable message should javascript not be available, which is also useful for when people run the page locally in Internet Explorer.

    There was recently a very nice article called What beautiful HTML code looks like so I will be using that as a guide.

    Code html4strict:
    <noscript>This page requires JavaScript in order to work properly</noscript>
    <h1>Vowel finder</h1>
    <p>Please enter in some text, and then click on Find Vowels.</p>
    <form id="findVowels">
        <input type="text" name="text">
        <input type="submit" value="Find Vowels">
    </form>

    Code css:
    noscript { background: #fcc; }

    The results for when the vowel is found will be created by the script itself.

    For the script, we will place it within an anonymous closure so that it doesn't pollute with the global namespace.

    We will also start the script with "use strict"; so that jslint.com and other people viewing the code will know that we care. The jslint.com settings are "The Good Parts" button, along with the "Assume a browsers" checkbox.

    Code javascript:
    "use strict";
    (function () {
     
    }());

    Now we can code in relative safety without interfering with (or being interfered by) other scripts that may be added later on.

    What we want to do is that when the submit button is clicked, we want to find the vowels, and then we set the focus to the text field, so that you can start typing in there when the page first loads.

    Code javascript:
    var form = document.getElementById('findVowels');
    form.onsubmit = findVowels;
    form.elements.text.focus();

    The first part of finding the vowels is relatively straight-forward.

    Code javascript:
    function findVowels() {
        var form = this,
            text = form.elements.text.value,
            pattern = /[a|e|i|o|u]/gi,
            vowels = text.match(pattern),

    After we've done that though, we need to show them somewhere. We can show them in a paragraph element just after the form, but we don't want to create a new paragraph each time. Instead if the paragraph already exists we will clear our the old contents before adding in the new set of vowels.

    Code javascript:
    ...
        p = document.getElementById('foundVowels'),
        foundVowels = 'No vowels found.';
    if (!p) {
        p = document.createElement('p');
        p.id = 'foundVowels';
        insertAfter(this, p);
    }
    while (p.hasChildNodes()) {
        p.removeChild(p.firstChild);
    }

    Now that we have a place prepared for them, we can put in the vowels that were found. The regular expression from before returns to us an array of the vowels that were found, so they will need to be joined together. We need to handle this carefully though because if no vowels were found then the join method will throw an error, and we don't want that to happen, so we set up a default string for if none are found, and when some are found we replace that default value with the vowels.

    And after showing the vowels, we return the focus to the text field so you can more easily play around with different types of text, and finally we return false from the function because we are done with the form, and we don't want the form submitting to anywhere.

    Code javascript:
    ...
        if (vowels !== null) {
            foundVowels = 'Vowels found: ' + vowels.join(' ');
        }
        p.appendChild(document.createTextNode(foundVowels));
        form.text.focus();
        return false;
    }

    Here is the script as a whole:

    Code html4strict:
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Vowel finder</title>
        <style type="text/css">
        noscript { background: #fcc; }
        </style>
    </head>
    <body>
    <noscript>This page requires JavaScript in order to work properly</noscript>
    <h1>Vowel finder</h1>
    <p>Please enter in some text, and then click on Find Vowels.</p>
    <form id="findVowels">
        <input type="text" name="text">
        <input type="submit" value="Find Vowels">
    </form>
    <script type="text/javascript">
    "use strict";
    (function () {
        function insertAfter(refEl, newEl) {
            if (refEl.nextSibling) {
                refEl.parentNode.insertBefore(newEl, refEl.nextSibling);
            } else {
                refEl.parentNode.appendChild(newEl);
            }
        }
        function findVowels() {
            var form = this,
                text = form.elements.text.value,
                pattern = /[a|e|i|o|u]/gi,
                vowels = text.match(pattern),
        p = document.getElementById('foundVowels'),
        foundVowels = 'No vowels found.';
    if (!p) {
        p = document.createElement('p');
        p.id = 'foundVowels';
        insertAfter(this, p);
    }
    while (p.hasChildNodes()) {
        p.removeChild(p.firstChild);
    }
            if (vowels !== null) {
                foundVowels = 'Vowels found: ' + vowels.join(' ');
            }
            p.appendChild(document.createTextNode(foundVowels));
            form.text.focus();
            return false;
        }
        var form = document.getElementById('findVowels');
        form.onsubmit = findVowels;
        form.elements.text.focus();
    }());
    </script>
    </body>
    </html>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If it's alright with you LPent I'll make use of the regular expression you provided.
    Ofcourse :-) be my guest.
    Nice implementation.

  10. #10
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much, pmw57

    Really really appreciate your efforts. Works just flawlessly.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •