How to change a Javascript File (.js file) with external values?
Wednesday, November 11th, 2009I need the code for the Javascript file that would enable it to be change with out chaning the JS file like Google adsense goes.
I just need it to change the background colour.
Example Code:
<SCRIPT language="JavaScript">
bg_color = "#FFFFFF";
</SCRIPT>
<SCRIPT TYPE="text/javascript" SRC="http://www2.domainname.com/file/file.js"></SCRIPT>
Thanks, Chris
<!– Paste this code into an external JavaScript file named: colorChange.js –>
/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
var sixteen;
var one;
var red;
var green;
var blue;
var colorCode;
var inputType = "dec";
var ralpha = "0123456789ABCDEF";
var temppos;
var rnumber;
hexArray = new Array();
hexArray[0] = "0";
hexArray[1] = "1";
hexArray[2] = "2";
hexArray[3] = "3";
hexArray[4] = "4";
hexArray[5] = "5";
hexArray[6] = "6";
hexArray[7] = "7";
hexArray[8] = "8";
hexArray[9] = "9";
hexArray[10] = "A";
hexArray[11] = "B";
hexArray[12] = "C";
hexArray[13] = "D";
hexArray[14] = "E";
hexArray[15] = "F";
rhexArray = new Array();
rhexArray[0] = "F";
rhexArray[1] = "E";
rhexArray[2] = "D";
rhexArray[3] = "C";
rhexArray[4] = "B";
rhexArray[5] = "A";
rhexArray[6] = "9";
rhexArray[7] = "8";
rhexArray[8] = "7";
rhexArray[9] = "6";
rhexArray[10] = "5";
rhexArray[11] = "4";
rhexArray[12] = "3";
rhexArray[13] = "2";
rhexArray[14] = "1";
rhexArray[15] = "0";
function d2h(number) { //converts a decimal number to hexadecimal
sixteen = Math.floor(number/16); //value in the 16s position
one = Math.floor(number-(sixteen*16)); //value in the 1s position
sixteen = hexArray[sixteen]; //hex representation of the value in the 16s position
one = hexArray[one]; //hex respresentation of the value in the 1s position
number = sixteen + one; //concatenate string values of hex digits
return number;
}
function h2d(number) { //converts hexadecimal numbers to decimal equivalents
if(number.substring(0,1) == "F") {
sixteen = 15;
} else if(number.substring(0,1) == "E") {
sixteen = 14;
} else if(number.substring(0,1) == "D") {
sixteen = 13;
} else if(number.substring(0,1) == "C") {
sixteen = 12;
} else if(number.substring(0,1) == "B") {
sixteen = 11;
} else if(number.substring(0,1) == "A") {
sixteen = 10;
} else {
sixteen = eval(number.substring(0,1));
}
sixteen = sixteen * 16;
if(number.substring(1,2) == "F") {
one = 15;
} else if(number.substring(1,2) == "E") {
one = 14;
} else if(number.substring(1,2) == "D") {
one = 13;
} else if(number.substring(1,2) == "C") {
one = 12;
} else if(number.substring(1,2) == "B") {
one = 11
} else if(number.substring(1,2) == "A") {
one = 10;
} else {
one = eval(number.substring(1,2));
}
return sixteen + one; //return sum of these decimal numbers
}
function changeFgColor(number) { //this function receives the background’s hexadecimal color code
//as a parameter, and then returns a suitable font color that would
//be visible on that background color
rnumber = "";
for(i=0; i <= number.length-1; i++) {
temppos = ralpha.indexOf(number.charAt(i));
rnumber = rnumber + rhexArray[temppos];
}
return rnumber;
}
function changeBgColor() { //this function reads in values from the text fields, parses the text
//as a color code, and then changes the background color
if(inputType == "hex") { //if user has changed the hexadecimal field
document.colorform.hextext.value = document.colorform.hextext.value.toUpperCase();
if(document.colorform.hextext.value.substring(0,1) == "#") { //if user placed "#" in front of hex color code
colorCode = document.colorform.hextext.value.substring(1,7);
} else {
colorCode = document.colorform.hextext.value.substring(0,6);
}
document.colorform.redtext.value = h2d(colorCode.substring(0,2)); //converts to red’s decimal value
document.colorform.greentext.value = h2d(colorCode.substring(2,4)); //converts to red’s decimal value
document.colorform.bluetext.value = h2d(colorCode.substring(4,6)); //converts to red’s decimal value
document.bgColor = colorCode; //change background color
document.fgColor = changeFgColor(colorCode); //change font color to something readable
return false; //exit function
}
//if program reaches this point, the color code is to be based on inputted decimal values,
//as opposed to hexadecimal values
//check red’s value range
if (eval(document.colorform.redtext.value) > 255 || eval(document.colorform.redtext.value) < 0) {
alert("All values must be and less than or equal to 255 and greater than or equal to 0.");
return false;
}
//check green’s value range
if (eval(document.colorform.greentext.value) > 255 || eval(document.colorform.greentext.value) < 0) {
alert("All values must be and less than or equal to 255 and greater than or equal to 0.");
return false;
}
//check blue’s value range
if (eval(document.colorform.bluetext.value) > 255 || eval(document.colorform.bluetext.value) < 0) {
alert("All values must be and less than or equal to 255 and greater than or equal to 0.");
return false;
}
red = d2h(eval(document.colorform.redtext.value)); //convert red’s decimal value to hex
green = d2h(eval(document.colorform.greentext.value));//convert green’s decimal value to hex
blue = d2h(eval(document.colorform.bluetext.value)); //convert blue’s decimal value to hex
colorCode = red + green + blue; //create hexadecimal color code
document.bgColor = colorCode; //set background color
document.fgColor = changeFgColor(colorCode); //change font color to something readable
document.colorform.hextext.value = "#" + colorCode; //rewrite hex’s text field with new color code
}
function changeInput(type) {
inputType = type; //inputType is to determine whether the user is changing the decimal text fields,
//or the hexadecimal text fields
}
function instruct() { //alerts user with instructions
alert("Enter a Red, Green, or Blue value of 0 to 255 \nor enter a 6 digit Hex Color Code using numbers 0-9\nand letters A-F then click Change Background.");
}
_________________________________________________________
<!– Paste this code into the HEAD section of your HTML document.
You may need to change the path of the file. –>
<script type="text/javascript" src="colorChange.js"></script>
_________________________________________________________
<!– Paste this code into the BODY section of your HTML document –>
<div style="width: 300px; margin-left: 30%; background-color: #fff; color: #00009C; text-align: center; line-height: 1.5em; ">
<form name="colorform" onSubmit="changeBgColor(); return false;">
Red: <input type="text" name="redtext" size="3" value="255" onfocus="changeInput(’dec’)">
Green: <input type="text" name="greentext" size="3" value="255" onfocus="changeInput(’dec’)">
Blue: <input type="text" name="bluetext" size="3" value="255" onfocus="changeInput(’dec’)">
<br>
Hex Code: <input type="text" name="hextext" size="7" value="#FFFFFF" onfocus="changeInput(’hex’)">
<br>
<input type="submit" value="Change Background" style="background-color: #00009C; color: #fff;">
<br>
<input type="button" value="Instructions" onclick="instruct()" style="background-color: #00009C; color: #fff;">
</form>
</div>