How to use “flags” in programming?
In programming, sometimes you may need switch-like objects to manage some tasks according to their values. For example, you have a button in your web page and you want to use it as a switch button for trigger an event (e.g. on/off, activate/deactivate, enable/disable). In this condition, you need to check the current situation (value) of the object in order to revert it. The object described here is not button itself, but the representer of the situation. This can be a boolean, string or any type of variable in the programming world.
That’s these objects used for perform another task according to their values can be named as “flags“. In other saying, any object in programming can be used as flags in this kind of needs.
As said above, flags can be any type of object like string, number, boolean or a variable which can take any type of data. Deciding which kind of variable must be use is related with the condition you want to use.
For example, if you need to perform an action according to “text” of an object, you might consider to use a “string” typed flag in order to check and handle whole work more clearly. Similar to this, if you need to do a task according to numeric value of an object, you can use a number (integer, double, decimal etc..) typed variable.
If you need to check only two possibilities like 0 or 1, true or false, yes and no etc. the “booleans” are the most used and also the smartest choice because of they already been built for this goal.
Now, how about a simple and enjoyable example? Let’s create a single html page and make a turn the light on/off application. To do this, create a new text document with notepad (or any text editor). Name it as whatever you want and save it as html document by adding .html to end of the name and do not forget to select “all files” in file type option before the click save.
Now examine the below code and write down them to your html file.
<html>
<head>
<script>
var status = 0; //Initial light condition is off.
//var lightis = "off" //We can check it as string value either, not will use at this time.
function turn_light()
{
if(status==0) //If light is off, performs below task and make the status as 1.
{
document.getElementById("bg").style.backgroundColor="wheat"; //Change "wheat" with your room color.
document.getElementById("bb").src="bulb_on.png";
document.getElementById("sw").src="on.jpg";
status=1;
}
else
{
document.getElementById("bg").style.backgroundColor="black";
document.getElementById("bb").src="bulb_off.png";
document.getElementById("sw").src="off.jpg";
status=0;
}
}
</script>
</head>
<body id="bg" style="background-color:black;">
<div style="text-align:center; margin-top:100px;"><p><img id="bb" src="bulb_off.png" width="100" /></p><p style="margin-top:50px;"><img id="sw" src="off.jpg" onclick="turn_light()" style="cursor:pointer"/></p></div>
</body>
</html>After you wrote all codes, save the file by pressing Ctrl+S on the keyboard or click “Save” in the file menu. You will need the image files used on this example, click here to download them into the same location of your html file.
After saved the file, find and run your html file by double-clicking on it.
Nice huh 🙂 Do some changes and customize it as your passion. You can find all files here and try the real time html is here. Enjoy!
