Simple javascript explanation

[rubai]

hi,
I am new to javascript learning. I just want to know the detail explanation of this code given in w3schools.

http://www.w3schools.com/js/tryit.asp?filename=tryjs_lightbulb

I know method match() works for finding match. But I can not understand the function. I have knowlege of C. Know if...else, while loop, for loop and the basics.

Please anyone tell me how the given code is working.

[JorgeM]

<img id="myimage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">

function changeImage()
    {
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
      {
      element.src="pic_bulboff.gif";
      }
    else
      {
      element.src="pic_bulbon.gif";
      }
    }
    </script>

In this example, there is an onclick event that is bound to the HTML image element with an id of "myimage". The you click on this element, the onclick event executes the changeImage function. In that function, you will notice that the element with the id of myimage is assigned to the variable called "element". Since its an image, the element now has access to the information stored in the src attribute.

From there its just a conditional statement to figure out if the current value stored in the src attribute has a match for "bulbon". If it does, the src attribute is assigned a new value of "pic_bulboff.gif" which changes the picture. If the conditional statement results in FALSE, the src attribute is assigned the value of "pic_bulbon.gif".

So when the image is that of a bulb turned off and you click, the bulb image is changed to that of one being turned on. When its on, the picture changes to a bulb that is off.

[rubai]

Thank you. :)
Now everything is clear to me.

[Taywin]

Just a side note. You could replace the pattern string in match() with a regular expression (regex), and that would give you a lot more usefulness.

For example, element.src.match("bulbon") would attempt to match exactly "bulbon" word (case-sensitive). If you still want to make it case insensitive, you may have to convert all string to lower case before you match (element.src.toLowerCase().match("bulbon")). In regular expression, you could simply change the way you do to element.src.match(/bulbon/i).

One obvious usefulness of regex is matching non-static patterns. For example, you want to match 4 digit numbers that have unknown white spaces between them. It would be likely impossible to use string patterns because of the unknown.

//For example:
var a = "54   7 4  154"
var b = "8 234   8         32"
var c = "235  d 377 6"
// How would you deal with these string if you use string pattern?
// Well, you could but there will be tons of patterns you need to check.
// But in regex, you simply uses...
if(a.match(/\d+\s+\d+\s+\d+\s+\d+/)) { alert("Found pattern!") }
else { alert("Pattern not found: "+a) }
if(b.match(/\d+\s+\d+\s+\d+\s+\d+/)) { alert("Found pattern!") }
else { alert("Pattern not found: "+b) }
if(c.match(/\d+\s+\d+\s+\d+\s+\d+/)) { alert("Found pattern!") }
else { alert("Pattern not found: "+c) }

// a & b will be found, but c won't.

If you are interested in more advance, you should read up the regular expression. There are many tutorial about it. The one I like is this one because it gives a lot more in depth for beginners.