Understanding how this JS works

[Lassie]

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

[Jacques1]

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)

[Lassie]

Hi,

Thanks for that. I would like to implement the the logic in PHP and I agree that I should try it myself.

Thanks

[Zane]

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.