SitePoint Sponsor |
|
User Tag List
Results 1 to 10 of 10
Thread: very very basic issue
-
May 25, 2008, 12:17 #1
very very basic issue
I'm new to js. I thought it is ok to concatenate variables and strings. Can someone please tell me why the below prints:
images/dwa76_1.jpg
images/dwa76_1.jpg
images/dwa76_1.jpg
images/dwa76_1.jpg
instead of:
images/dwa76_1.jpg
images/dwa76_2.jpg
images/dwa76_3.jpg
images/dwa76_4.jpg
var num = 1;
var newThumbnailImg = "images/dwa76_" + num + ".jpg";
function initAll(){
document.write(newThumbnailImg + "<br>");
num++;
document.write(newThumbnailImg + "<br>");
num++;
document.write(newThumbnailImg + "<br>");
num++;
document.write(newThumbnailImg + "<br>");
}
-
May 25, 2008, 13:38 #2
- Join Date
- Apr 2008
- Location
- England
- Posts
- 46
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Try using a for loop, like so:
Code:function init() { for(var i = 1; i <= 4; i++) { var newThumbnailImg = "images/dwa76_" + i + ".jpg"; document.write(newThumbnailImg + "<br />"); } } init();
-
May 25, 2008, 14:02 #3
thanks, that works. but still, why does the code above print
images/dwa76_1.jpg
images/dwa76_1.jpg
images/dwa76_1.jpg
images/dwa76_1.jpg
instead of:
images/dwa76_1.jpg
images/dwa76_2.jpg
images/dwa76_3.jpg
images/dwa76_4.jpg
can't i concatenate variables and strings like i did?
-
May 25, 2008, 14:19 #4
- Join Date
- Jun 2007
- Location
- Bristol, England
- Posts
- 74
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
newThumbnailImg contains a string which you generated through concatination. It is not a dynamic string. If you increment the counter, num, you are doing just that--incrementing the counter and not updating the newThumbnailImg variable.
-
May 25, 2008, 16:16 #5
oh ok, that makes sense. so what could i do if i wanted to make newThumbnailImg a dynamic string?
-
May 25, 2008, 16:22 #6
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
If you used the following it would work
Code javascript:var num = 1; var newThumbnailImg = function () { return "images/dwa76_" + num + ".jpg"; } function initAll(){ document.write(newThumbnailImg() + "<br>"); num++; document.write(newThumbnailImg() + "<br>"); num++; document.write(newThumbnailImg() + "<br>"); num++; document.write(newThumbnailImg() + "<br>"); } initAll();
You could simplify that even further with
Code javascript:var newThumbnailImg = function (num) { return function () { return "images/dwa76_" + (num++) + ".jpg"; }; }(1); function initAll(){ document.write(newThumbnailImg() + "<br>"); document.write(newThumbnailImg() + "<br>"); document.write(newThumbnailImg() + "<br>"); document.write(newThumbnailImg() + "<br>"); } initAll();
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
May 25, 2008, 17:15 #7
In the second example, how does the variable newThumbnailImg know that the "1" on the last line is num?
-
May 25, 2008, 18:39 #8
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
Let's show the code in a different way that you're more familiar with.
Code javascript:function newThumbnailImg(num) { ... }; newThumbnailImg(1);
You can also assign a function to a variable argument.
Code javascript:var newThumbnailImg = function (num) { ... }; newThumbnailImg(1);
And so it is just a small step to call the function at the same time as you create it.
Code javascript:var newThumbnailImg = function (num) { ... }(1);
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
May 25, 2008, 18:50 #9
so this is a shorthand way of passing an argument to a function?
-
May 25, 2008, 19:23 #10
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
The anonymous function provides closure, so that num can be retained for when the event calls it, and the function itself is being instantiated at the same time as it's being defined.
Have a look at the functions section at http://javascript.crockford.com/survey.html
The function statement is what's commonly used, but it's really shorthand for the functions statement which has been made use of in the above code.Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
Bookmarks