Jump to content

Understanding how this JS works


Lassie

Recommended Posts

Hi,

I am new to JS but OK in PHP.

I would like to use JS code similar to this' http://www.geocachingtoolbox.com/index.php?page=dancingMen'  a php program.

My problem is understanding how this works.

I have posted what seem to be the two key functions and  my first attempt to simplify things as well as the link the above link in the hope somebody can get my thinking working in the right direction particularly in understanding the two functions.

 

Many thanks for a starter for ten,

<script type="text/javascript">
var validChars= new Array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z')
var validNums= new Array('0','1','2','3','4','5','6','7','8','9');
function textToIm(){
    chars=document.getElementById('dancingMenText').value;
    splitChars=chars.split('');
    newDiv='';
    for(i=0; i<splitChars.length; i++){
        lowerChar=splitChars[i].toLowerCase();
        if (validChars.indexOf(lowerChar)>-1){
            if (i+1==splitChars.length || splitChars[i+1]==' ' || splitChars[i+1]=='\n'){
                newDiv+='<img src="pages/dancingMen/'+lowerChar+'v.gif" alt="'+splitChars[i]+'" title="'+splitChars[i]+'">';
            }else{
                newDiv+='<img src="pages/dancingMen/'+lowerChar+'.gif" alt="'+splitChars[i]+'" title="'+splitChars[i]+'">';
            }
        }else if (validNums.indexOf(lowerChar)>-1){
            newDiv+='<img src="pages/dancingMen/'+lowerChar+'.gif" alt="'+splitChars[i]+'" title="'+splitChars[i]+'">';
        }else if (lowerChar!=' '){
            newDiv+=splitChars[i];
        }
    }

    newDiv = newDiv.replace(/\n\r?/g, '<br>');
    if (chars.length==0){
        newDiv='';
    }
    document.getElementById('dancingMenDiv').innerHTML=newDiv;
}

function imToText(char,space){
    if (space==1){
        document.getElementById('dancingMenDiv').innerHTML+='<img src="pages/dancingMen/'+char+'v.gif" alt="'+char+'" title="'+char+'">';
        document.getElementById('dancingMenText').value+=char+' ';
    }else{
        document.getElementById('dancingMenDiv').innerHTML+='<img src="pages/dancingMen/'+char+'.gif" alt="'+char+'" title="'+char+'">';
        document.getElementById('dancingMenText').value+=char;
    }
}

</script>

index.php

Link to comment
Share on other sites

What's your goal? Do you want to learn JavaScript? Or do you want to implement the dancing-men code with PHP?

 

If you just want an implementation, forget about the JavaScript code and do it yourself. It's very easy, and you'll learn much more from your own implementation than from imitating somebody else's code.

 

The logic is simple:

for each character of the input:
  if character is alphabetic:
    if the word is terminated afterwards (space, end of string etc.):
      print the corresponding code with a flag
    else:
      print the corresponding code without a flag
  else if character is numeric:
    print the corresponding code
  else:
    (some fallback solution)
Link to comment
Share on other sites

JavaScript != PHP

 

There is a large range of things that can be done with JS that cannot be with PHP e.g, detecting a click event.  JavaScript is client side, therefore it is primarily used to capture client side interactions (clicks, idle time count, scrolling, hovering, and pretty much anything else you do with a mouse.  The keyboard is also an input from which to capture events.  The arrows, the types of characters, and just the act of typing is literally client side information.  The website you provided us with as your target project to accomplish in PHP, will require some JS in some way or fashion.

 

What you can do, though, is use PHP to decipher the text entered and return the formatted string, but only after sending it to a PHP script and receiving it through AJAX.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.