javascript and hex validation
Moderator: General Moderators
javascript and hex validation
i have a page for finding colors in hex by placing in rgb codes in decimal or percent... i decided to try to add hex. the version with hex wont work once you submit in hex. i don't understand why. was wondering if anyone can help me get the hex to work.
location of the working version without hex that i plan on using until i can get hex: http://24.91.157.113/findyourdesire/colorfinder.php
location of the version with hex, but dies when you try to use hex, and i'd like help getting hex working (and when i wrote this initially i have so little regexp experience i didn't use that, but probalby will switch the check to a regexp): http://24.91.157.113/findyourdesire/vcf.php
any help would be greatly appreciated. i didn't copy the code because i'm clueless as to why it's not working, so i figure a demo would be the best thing
location of the working version without hex that i plan on using until i can get hex: http://24.91.157.113/findyourdesire/colorfinder.php
location of the version with hex, but dies when you try to use hex, and i'd like help getting hex working (and when i wrote this initially i have so little regexp experience i didn't use that, but probalby will switch the check to a regexp): http://24.91.157.113/findyourdesire/vcf.php
any help would be greatly appreciated. i didn't copy the code because i'm clueless as to why it's not working, so i figure a demo would be the best thing
- Derfel Cadarn
- Forum Contributor
- Posts: 193
- Joined: Thu Jul 17, 2003 12:02 pm
- Location: Berlin, Germany
Hi,
I've been trying to get a look at your scripts but the server tells me those links you provided weren't reachable. Perhaps I'll try it laagain.
In the meantime, when you're writing it in PHP (which I suspect, regarding the filenames), you could have a look here for converting HEX to DEC.
I've been trying to get a look at your scripts but the server tells me those links you provided weren't reachable. Perhaps I'll try it laagain.
In the meantime, when you're writing it in PHP (which I suspect, regarding the filenames), you could have a look here for converting HEX to DEC.
sorry about that. my parents turned off the server over night. i woke up at 9. so it was up again at 9:30.
it's actually being done client side since there's not real need to go server side since it can be done in java script.
i converted to a reg exp from the long check of each character alone... the issue is that if you use the hex nothing happens and it wont take anything after. i don't understand why. i don't understand what's wrong.
it's actually being done client side since there's not real need to go server side since it can be done in java script.
i converted to a reg exp from the long check of each character alone... the issue is that if you use the hex nothing happens and it wont take anything after. i don't understand why. i don't understand what's wrong.
ok... since no one wis wiling ot go to the server, here's colorfiner.php: and here's vcf.php
Code: Select all
[joshua@Ashes fyd]$ cat colorfinder.php
<?php
include('/home/joshua/includes/fyd.incs.php');
if(isset($_GET['fn'])){
if($_GET['fn']=='control'){ // create the control page
bgnmsgpg('Font Color Hex-Code Finder Control Panel');
?> <!--
start of for color table that will be used to control the colors of the other pages shown.
use a table inside the form to position the options neater.
take out the border/cell padding since those are unecesary.
-->
<form name="colortable">
<?php echo $tsnw ?>
<!-- first the space to write in the values -->
<tr>
<td colspan="3" class="center">
<span class="red"> Red: <input type="text" name="red" width="5"></span>
<span class="green"> Green: <input type="text" name="green" width="5"></span>
</td>
</tr>
<tr>
<td>
<span class="blue"> Blue: <input type="text" name="blue" width="5"></span>
</td>
<td class="left">
<!-- then tell what form they were written in -->
<select name="hdp">
<option value="dec">Decimal</option>
<option value="per">Percent</option>
</select>
</td>
<td class="right">
<!-- then collect the information -->
<input type="button" onClick="findcolor()" value="show me!" >
</tr>
</table>
</form>
<!-- instructions on use -->
<p>to use this page, select either "Decimal" or "Percent". Then type the RGB values you desire to see.
<br />for Decimal, acceptable values are 0 through 255 inclusive.
<br />for Percent, acceptable values are 0 through 100 inclusive.
</p>
<!-- use java script to find out what was entered and handle it -->
<script language="javascript">
function findcolor(){ // find the colors
/* find out what was entered */
var hdp=(parent.cntrl.document.colortable.hdp.value);
var red=(parent.cntrl.document.colortable.red.value *1);
var gre=(parent.cntrl.document.colortable.green.value *1);
var blu=(parent.cntrl.document.colortable.blue.value *1);
var text="#ffffff";
var hexpat=/[0-9A-Fa-f]/;
/* check for type & validity, then call the write function */
if(hdp=="dec"){
/* make sure it is between 000 and 255 */
if((red<0)||(red>255)){ // make sure the red value is valid
alert("the value for Red is not legal, it must be between 0 and 255 inclusive.")
}else if((gre<0)||(gre>255)){ // make sure the red value is valid
alert("the value for Green is not legal, it must be between 0 and 255 inclusive.")
}else if((blu<0)||(blu>255)){ // make sure the red value is valid
alert("the value for Blue is not legal, it must be between 0 and 255 inclusive.")
}else{ // if it's all legal then write it
if((red>190)&&(gre>190)&&(blu>190)){ // it's too white
text="#000000";
}
writecolor("dec", red, gre, blu, text);
}
}else{ // if not decimal, it must be percent.
/* make sure it is between 0 and 100 inclusive */
if((red<0)||(red>100)){ // make sure the red value is valid
alert("the value for Red is not legal, it must be between 0 and 100 inclusive.")
}else if((gre<0)||(gre>100)){ // make sure the red value is valid
alert("the value for Green is not legal, it must be between 0 and 100 inclusive.")
}else if((blu<0)||(blu>100)){ // make sure the red value is valid
alert("the value for Blue is not legal, it must be between 0 and 100 inclusive.")
}else{ // if it's all legal then write it
if((red>75)&&(gre>75)&&(blu>75)){ // it's too white
text="#000000";
}
writecolor("per", red, gre, blu, text);
}
}
function writecolor(type, r, g, b, text){ // makes sure everything is in hex, then send it to be written
if(type=="dec"){
r=dechex(r);
g=dechex(g);
b=dechex(b);
writeframe(r, g, b, text);
}else{
r=perhex(r);
g=perhex(g);
b=perhex(b);
writeframe(r, g, b, text);
}
}
function writeframe(r, g, b){ // write to the frames;
parent.b1.document.open(); // write red
parent.b1.document.write("<html><body bgcolor="#"+r+"0000" text=""+text+""> \n Color=#"+r+"0000 \n </body></html>");
parent.b1.document.close();
parent.b2.document.open(); // write yellow
parent.b2.document.write("<html><body bgcolor="#"+r+g+"00" text=""+text+""> \n Color=#"+r+g+"00 \n </body></html>");
parent.b2.document.close();
parent.b3.document.open(); // write green
parent.b3.document.write("<html><body bgcolor="#00"+g+"00" text=""+text+""> \n Color=#00"+g+"00 \n </body></html>");
parent.b3.document.close();
parent.c.document.open(); // write full color
parent.c.document.write("<html><body bgcolor="#"+r+g+b+"" text=""+text+""> \n Color=#"+r+g+b+" \n </body></html>");
parent.c.document.close();
parent.d1.document.open(); // write magenta
parent.d1.document.write("<html><body bgcolor="#"+r+"00"+b+"" text=""+text+""> \n Color=#"+r+"00"+b+" \n </body></html>");
parent.d1.document.close();
parent.d2.document.open(); // write blue
parent.d2.document.write("<html><body bgcolor="#0000"+b+"" text=""+text+""> \n Color=#0000"+b+" \n </body></html>");
parent.d2.document.close();
parent.d3.document.open(); // write cyan
parent.d3.document.write("<html><body bgcolor="#00"+g+b+"" text=""+text+""> \n Color=#00"+g+b+" \n </body></html>");
parent.d3.document.close();
}
function perhex(num){ // convert percent to hexidecimal
/* convert to decimal, call dechex. (theory--> x/100=y/255-->255x=100y-->255x/100=y) */
return (fhex(dechex(Math.round((255*num)/100))));
}
function dechex(num){ // convert decimal to hexidecimal
var hex;
return (fhex(num.toString(16)));
}
function vhex(num){ // is the hex number valid?
if(!fhex(num)!="false") return true;
else return false;
}
function fhex(num){ // makes sure hexidecimal number is valid
if((num.length<1)||(num.length>2)) return "false" // is it too large or empty?
else{ // it is the right length, check the charachters.
/* take the first character and check validity */
if((num.charAt(0)).match(hexpat)){ // does it match the pattern of valid hex characters?
/* is there a second character? */
if(num.length==1){
num="0"+num; // no, so add leading zero
return num; // return the number
}else{ // yes, check for validty
if((num.charAt(1)).match(hexpat)){ // does it match the pattern of valid hex characters?
return num;
}else return "false";
}
}else return "false";
}
}
}
</script>
<?php
clspg();
}elseif($_GET['fn']=='r'){ // make the initial
bgnmsgpg('red'); echo "Red Displays Here</center></body></html>";
}elseif($_GET['fn']=='y'){ // make the initial
bgnmsgpg('yellow'); echo "Yellow Displays Here</center></body></html>";
}elseif($_GET['fn']=='g'){ // make the initial
bgnmsgpg('green'); echo "Green Displays Here</center></body></html>";
}elseif($_GET['fn']=='rgb'){ // make the initial
bgnmsgpg('full color'); echo "Full Color Displays Here</center></body></html>";
}elseif($_GET['fn']=='m'){ // make the initial
bgnmsgpg('magenta'); echo "Magenta Displays Here</center></body></html>";
}elseif($_GET['fn']=='b'){ // make the initial
bgnmsgpg('blue'); echo "Blue Displays Here</center></body></html>";
}elseif($_GET['fn']=='c'){ // make the initial
bgnmsgpg('cyan'); echo "Cyan Displays Here</center></body></html>";
}
}else{
bgnfm('Font Color Hex-Code Finder');
echo <<<END
<frameset rows="55%,15%,15%,15%">
<!-- allow scrolling incase the user has text set to a size that will require it -->
<frame scrolling="auto" noresize="no" name="cntrl" src="{$_SERVER['PHP_SELF']}?fn=control"></frame>
<!-- create columns for the "triangle" -->
<frameset cols="25%,50%,25%">
<!-- create subframes -->
<frame scrolling="no" noresize="yes" name="b1" src="{$_SERVER['PHP_SELF']}?fn=r"></frame>
<frame scrolling="no" noresize="yes" name="b2" src="{$_SERVER['PHP_SELF']}?fn=y"></frame>
<frame scrolling="no" noresize="yes" name="b3" src="{$_SERVER['PHP_SELF']}?fn=g"></frame>
</frameset>
<frame scrolling="no" noresize="yes" name="c" src="{$_SERVER['PHP_SELF']}?fn=rgb"></frame>
<!-- create columns for the "triangle" -->
<frameset cols="38%,24%,38%">
<!-- create subframes -->
<frame scrolling="no" noresize="yes" name="d1" src="{$_SERVER['PHP_SELF']}?fn=m"></frame>
<frame scrolling="no" noresize="yes" name="d2" src="{$_SERVER['PHP_SELF']}?fn=b"></frame>
<frame scrolling="no" noresize="yes" name="d3" src="{$_SERVER['PHP_SELF']}?fn=c"></frame>
</frameset>
<!-- message to frame incapable browsers -->
<noframe>
<p>You need a frames-capable browser. I suggest Mozilla (1.3.1 or greater) since this site was tested with it. Microsoft Internet Explorer been announced "End-Of-Life" and will not be upgraded after 6.0. While it is currently capable of handling nearly everything out there, it is only a matter of time till it no longer displays pages properly.</p>
</noframe>
</frameset>
</html>
END;
}
?>
[joshua@Ashes fyd]$Code: Select all
[joshua@Ashes fyd]$ cat vcf.php
<?php
include('/home/joshua/includes/fyd.incs.php');
if(isset($_GET['fn'])){
if($_GET['fn']=='control'){ // create the control page
bgnmsgpg('Font Color Hex-Code Finder Control Panel');
?> <!--
start of for color table that will be used to control the colors of the other pages shown.
use a table inside the form to position the options neater.
take out the border/cell padding since those are unecesary.
-->
<form name="colortable">
<?php echo $tsnw ?>
<!-- first the space to write in the values -->
<tr>
<td colspan="3" class="center">
<span class="red"> Red: <input type="text" name="red" width="5"></span>
<span class="green"> Green: <input type="text" name="green" width="5"></span>
</td>
</tr>
<tr>
<td>
<span class="blue"> Blue: <input type="text" name="blue" width="5"></span>
</td>
<td class="left">
<!-- then tell what form they were written in -->
<select name="hdp">
<option value="hex">Hexadecimal</option>
<option value="dec">Decimal</option>
<option value="per">Percent</option>
</select>
</td>
<td class="right">
<!-- then collect the information -->
<input type="button" onClick="findcolor();" value="show me!" >
</tr>
</table>
</form>
<!-- instructions on use -->
<p>to use this page, select either "Decimal" or "Percent". Then type the RGB values you desire to see.
<br />for Hexadecimal, acceptable values are 00 through FF inclusive. (0-9,A,B,C,D,E,F)
<br />for Decimal, acceptable values are 0 through 255 inclusive.
<br />for Percent, acceptable values are 0 through 100 inclusive.
<br />Note: leading 0 not always shown for each group (RGB)
</p>
<!-- use java script to find out what was entered and handle it -->
<script language="javascript">
function findcolor(){ // find the colors
/* find out what was entered */
var hdp=(parent.cntrl.document.colortable.hdp.value);
var red=(parent.cntrl.document.colortable.red.value *1);
var gre=(parent.cntrl.document.colortable.green.value *1);
var blu=(parent.cntrl.document.colortable.blue.value *1);
var hred=parent.cntrl.document.colortable.red.value;
var hgre=parent.cntrl.document.colortable.green.value;
var hblu=parent.cntrl.document.colortable.blue.value;
var text="style="color:#ffffff"";
var hexpat=/[0-9A-Fa-f]/; // valid hex characters
var valhexpat=/^[0-9A-Fa-f]+$/; // any hex character more than one times
var pat=/^[C-Fc-f].$/; // anything lighter than bf
/* check for type & validity, then call the write function */
if(hdp=="hex"){ // hex code entered
/* make sure it is between 00 and ff */
if(!(hred.match(valhexpat))){ // make sure the red value is valid
alert("the value for Red is not legal, it must be between 00 and FF inclusive.");
}else if(!(hgre.match(valhexpat))){ // make sure the red value is valid
alert("the value for Green is not legal, it must be between 00 and FF inclusive.");
}else if(!(hblu.match(valhexpat))){ // make sure the red value is valid
alert("the value for Blue is not legal, it must be between 00 and FF inclusive.");
}else{ // if it's all legal then write it
if((hred.match(pat))&&(hgre.match(pat))&&(hblu.match(pat))){ // it's too white
text="style="color:#000000"";
}
writecolor("hex", red, gre, blu, text);
}
}else if(hdp=="dec"){ // dec code entered
/* make sure it is between 000 and 255 */
if((red<0)||(red>255)){ // make sure the red value is valid
alert("the value for Red is not legal, it must be between 0 and 255 inclusive.");
}else if((gre<0)||(gre>255)){ // make sure the red value is valid
alert("the value for Green is not legal, it must be between 0 and 255 inclusive.");
}else if((blu<0)||(blu>255)){ // make sure the red value is valid
alert("the value for Blue is not legal, it must be between 0 and 255 inclusive.");
}else{ // if it's all legal then write it
if((red>190)&&(gre>190)&&(blu>190)){ // it's too white
text="style="color:#000000"";
}
writecolor("dec", red, gre, blu, text);
}
}else{ // if not decimal, it must be percent.
/* make sure it is between 0 and 100 inclusive */
if((red<0)||(red>100)){ // make sure the red value is valid
alert("the value for Red is not legal, it must be between 0 and 100 inclusive.");
}else if((gre<0)||(gre>100)){ // make sure the red value is valid
alert("the value for Green is not legal, it must be between 0 and 100 inclusive.");
}else if((blu<0)||(blu>100)){ // make sure the red value is valid
alert("the value for Blue is not legal, it must be between 0 and 100 inclusive.");
}else{ // if it's all legal then write it
if((red>75)&&(gre>75)&&(blu>75)){ // it's too white
text="style="#000000"";
}
writecolor("per", red, gre, blu, text);
}
}
function writecolor(type, r, g, b, text){ // makes sure everything is in hex, then send it to be written
if(type=="dec"){
r=dechex(r);
g=dechex(g);
b=dechex(b);
writeframe(r, g, b, text);
}else if{
r=perhex(r);
g=perhex(g);
b=perhex(b);
writeframe(r, g, b, text);
}
}
function writeframe(r, g, b, text){ // write to the frames;
parent.b1.document.open(); // write red
parent.b1.document.write("<html><body bgcolor="#"+r+"0000" "+text+"> \n Color=#"+r+"0000 \n </body></html>");
parent.b1.document.close();
parent.b2.document.open(); // write yellow
parent.b2.document.write("<html><body bgcolor="#"+r+g+"00" "+text+"> \n Color=#"+r+g+"00 \n </body></html>");
parent.b2.document.close();
parent.b3.document.open(); // write green
parent.b3.document.write("<html><body bgcolor="#00"+g+"00" "+text+"> \n Color=#00"+g+"00 \n </body></html>");
parent.b3.document.close();
parent.c.document.open(); // write full color
parent.c.document.write("<html><body bgcolor="#"+r+g+b+"" "+text+"> \n Color=#"+r+g+b+" \n </body></html>");
parent.c.document.close();
parent.d1.document.open(); // write magenta
parent.d1.document.write("<html><body bgcolor="#"+r+"00"+b+"" "+text+"> \n Color=#"+r+"00"+b+" \n </body></html>");
parent.d1.document.close();
parent.d2.document.open(); // write blue
parent.d2.document.write("<html><body bgcolor="#0000"+b+"" "+text+"> \n Color=#0000"+b+" \n </body></html>");
parent.d2.document.close();
parent.d3.document.open(); // write cyan
parent.d3.document.write("<html><body bgcolor="#00"+g+b+"" "+text+"> \n Color=#00"+g+b+" \n </body></html>");
parent.d3.document.close();
}
function perhex(num){ // convert percent to hexidecimal
/* convert to decimal, call dechex. (theory--> x/100=y/255-->255x=100y-->255x/100=y) */
return (fhex(dechex(Math.round((255*num)/100))));
}
function dechex(num){ // convert decimal to hexidecimal
return (fhex(num.toString(16)));
}
function vhex(num){ // is the hex number valid?
if(!fhex(num)!="false") return true;
else return false;
}
function fhex(num){ // makes sure hexidecimal number is valid
if((num.length<1)||(num.length>2)) return "false" // is it too large or empty?
else{ // it is the right length, check the charachters.
/* take the first character and check validity */
if((num.charAt(0)).match(hexpat)){ // does it match the pattern of valid hex characters
/* is there a second character? */
if(num.length==1){
num='0'+num; // no, so add leading zero
return num; // return the number
}else{ // yes, check for validty
if((num.charAt(1)).match(hexpat)){ // does it match the pattern of valid hex characters?
return num;
}else return "false";
}
}else return "false";
}
}
}
</script>
<?php
clspg();
}elseif($_GET['fn']=='r'){ // make the initial
bgnmsgpg('red'); echo "Red Displays Here</center></body></html>";
}elseif($_GET['fn']=='y'){ // make the initial
bgnmsgpg('yellow'); echo "Yellow Displays Here</center></body></html>";
}elseif($_GET['fn']=='g'){ // make the initial
bgnmsgpg('green'); echo "Green Displays Here</center></body></html>";
}elseif($_GET['fn']=='rgb'){ // make the initial
bgnmsgpg('full color'); echo "Full Color Displays Here</center></body></html>";
}elseif($_GET['fn']=='m'){ // make the initial
bgnmsgpg('magenta'); echo "Magenta Displays Here</center></body></html>";
}elseif($_GET['fn']=='b'){ // make the initial
bgnmsgpg('blue'); echo "Blue Displays Here</center></body></html>";
}elseif($_GET['fn']=='c'){ // make the initial
bgnmsgpg('cyan'); echo "Cyan Displays Here</center></body></html>";
}
}else{
bgnfm('Font Color Hex-Code Finder');
echo <<<END
<frameset rows="55%,15%,15%,15%">
<!-- allow scrolling incase the user has text set to a size that will require it -->
<frame scrolling="auto" noresize="no" name="cntrl" src="{$_SERVER['PHP_SELF']}?fn=control"></frame>
<!-- create columns for the "triangle" -->
<frameset cols="25%,50%,25%">
<!-- create subframes -->
<frame scrolling="no" noresize="yes" name="b1" src="{$_SERVER['PHP_SELF']}?fn=r"></frame>
<frame scrolling="no" noresize="yes" name="b2" src="{$_SERVER['PHP_SELF']}?fn=y"></frame>
<frame scrolling="no" noresize="yes" name="b3" src="{$_SERVER['PHP_SELF']}?fn=g"></frame>
</frameset>
<frame scrolling="no" noresize="yes" name="c" src="{$_SERVER['PHP_SELF']}?fn=rgb"></frame>
<!-- create columns for the "triangle" -->
<frameset cols="38%,24%,38%">
<!-- create subframes -->
<frame scrolling="no" noresize="yes" name="d1" src="{$_SERVER['PHP_SELF']}?fn=m"></frame>
<frame scrolling="no" noresize="yes" name="d2" src="{$_SERVER['PHP_SELF']}?fn=b"></frame>
<frame scrolling="no" noresize="yes" name="d3" src="{$_SERVER['PHP_SELF']}?fn=c"></frame>
</frameset>
<!-- message to frame incapable browsers -->
<noframe>
<p>You need a frames-capable browser. I suggest Mozilla (1.3.1 or greater) since this site was tested with it. Microsoft Internet Explorer been announced "End-Of-Life" and will not be upgraded after 6.0. While it is currently capable of handling nearly everything out there, it is only a matter of time till it no longer displays pages properly.</p>
</noframe>
</frameset>
</html>
END;
}
?>
[joshua@Ashes fyd]$which webbrowser do you use? perhaps I can help you to turn on the debugger.
anyway the current error is located at line 121.it's either or
anyway the current error is located at line 121.
Code: Select all
}else if{Code: Select all
} else {Code: Select all
} else if (<something that evaluates to true/false>) {I refered to the document as seen by the client 
The error's still in there, linenumber has changed to 120 but it's still there
The error's still in there, linenumber has changed to 120 but it's still there
Code: Select all
function writecolor(type, r, g, b, text){ // makes sure everything is in hex, then send it to be written
if(type=="dec"){
r=dechex(r);
g=dechex(g);
b=dechex(b);
writeframe(r, g, b, text);
}else if{ // <==-----------------| if what?
r=perhex(r);
g=perhex(g);
b=perhex(b);
writeframe(r, g, b, text);
}
}lol. i saw a diff eroro when i checked after realizing that you probalby meant in the client.
look at what that does... hex is irrelevant there. it shoudl call write frame directly
ofcourse that also begs the question: why does the other one work?
i'm thinking javascript is smart enough to realize there's only 2 choices
look at what that does... hex is irrelevant there. it shoudl call write frame directly
ofcourse that also begs the question: why does the other one work?
i'm thinking javascript is smart enough to realize there's only 2 choices
- Vincent Puglia
- Forum Commoner
- Posts: 67
- Joined: Thu Sep 04, 2003 4:20 pm
- Location: where the World once stood
- Vincent Puglia
- Forum Commoner
- Posts: 67
- Joined: Thu Sep 04, 2003 4:20 pm
- Location: where the World once stood
Hi,
It may not be reserved, but <input type=...>
I realize many people use 'form' 'type', etc as variable names. I tend to believe it is better to stay as far away from any such words as possible. After all, how difficult is it to say 'myType' or 'type1' ?
Recently, I was helping someone with javascript oop code and he had used the following as a constructor:
function something(parent, key, ....)
{
this.parent = parent;
....
}
needless to say, the browser freaked.
So again: I wouldn't use reserved (or not) keywords ...
Vinny
It may not be reserved, but <input type=...>
I realize many people use 'form' 'type', etc as variable names. I tend to believe it is better to stay as far away from any such words as possible. After all, how difficult is it to say 'myType' or 'type1' ?
Recently, I was helping someone with javascript oop code and he had used the following as a constructor:
function something(parent, key, ....)
{
this.parent = parent;
....
}
needless to say, the browser freaked.
So again: I wouldn't use reserved (or not) keywords ...
Vinny
lol. i actually realized that the thing which had caused the issue was redundant and unneeded. and i could make the whole code much more efficient and remove three functions. in the process i removed the type thingy that was being passed. but i'm normally good about that. if i know something's reserved i avoid it. i used type because it was exacly what it was.. describing the type, and there was no issue in javascript and it would only be in javascript. the new code doesn't have that