Lets do the following exercises:
To convert Hex colors to RGB, perform the following:
function getRGB(hex) { return "rgb(" + parseInt(hex[1] + hex[2], 16) + ", " + parseInt(hex[3] + hex[4], 16) + ", " + parseInt(hex[5] + hex[6], 16) + ")"; } Testing: > getRGB("#00ff00"); "rgb(0, 255, 0)" > getRGB("#badfad"); "rgb(186, 223, 173)"
One problem with this solution is that array access to strings like
hex[0]
is not in ECMAScript 3, although many browsers have supported it for a long time and is now described in ES5.However, But at this point in the book, there was as yet no discussion of objects and methods. Otherwise an ES3-compatible solution would be to use one of the string methods, such as
charAt()
,substring()
, orslice()
. You can also use an array to avoid too much string concatenation:function getRGB2(hex) { var result = []; result.push(parseInt(hex.slice(1, 3), 16)); result.push(parseInt(hex.slice(3, 5), 16)); result.push(parseInt(hex.slice(5), 16)); return "rgb(" + result.join(", ") + ")"; }
Bonus exercise: Rewrite the preceding function using a loop so you don't have to type
parseInt()
three times, but just once.The result is as follows:
> parseInt(1e1); 10 Here, you're parsing something that is already an integer: > parseInt(10); 10 > 1e1; 10
Here, the parsing of a string gives up on the first non-integer value.
parseInt()
doesn't understand exponential literals, it expects integer notation:> parseInt('1e1'); 1
This is parsing the string
'1e1'
while expecting it to be in decimal notation, including exponential:> parseFloat('1e1'); 10
The following is the code line and its output:
> isFinite(0 / 10); true
Because
0/10
is0
and0
is finite.The following is the code line and its output:
> isFinite(20 / 0); false
Because division by
0
isInfinity
:> 20 / 0; Infinity
The following is the code line and its output:
> isNaN(parseInt(NaN)); true
Parsing the special
NaN
value isNaN
.What is the result of:
var a = 1; function f() { function n() { alert(a); } var a = 2; n(); } f();
This snippet alerts
2
even thoughn()
was defined before the assignment,a = 2
. Inside the functionn()
you see the variablea
that is in the same scope, and you access its most recent value at the time invocation off()
(and hencen()
). Due to hoistingf()
acts as if it was:function f() { var a; function n() { alert(a); } a = 2; n(); }
More interestingly, consider this code:
var a = 1; function f() { function n() { alert(a); } n(); var a = 2; n(); } f();
It alerts
undefined
and then2
. You might expect the first alert to say1
, but again due to variable hoisting, the declaration (not initialization) ofa
is moved to the top of the function. As iff()
was:var a = 1; function f() { var a; // a is now undefined function n() { alert(a); } n(); // alert undefined a = 2; n(); // alert 2 } f();
The local
a
"shadows" the globala
, even if it's at the bottom.Why all these alert "Boo!"
The following is the result of Example 1:
var f = alert; eval('f("Boo!")');
The following is the result of Example 2. You can assign a function to a different variable. So
f()
points toalert()
. Evaluating this string is like doing:> f("Boo");
The following is the output after we execute
eval()
:var e; var f = alert; eval('e=f')('Boo!');
The following is the output of Example 3.
eval()
returns the result on the evaluation. In this case it's an assignmente = f
that also returns the new value ofe
. Like the following:> var a = 1; > var b; > var c = (b = a); > c; 1
So
eval('e=f')
gives you a pointer toalert()
that is executed immediately with"Boo!"
.The immediate (self-invoking) anonymous function returns a pointer to the function
alert()
, which is also immediately invoked with a parameter"Boo!"
:(function(){ return alert; })()('Boo!');