SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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>");
    }

  2. #2
    SitePoint Enthusiast PicklePete's Avatar
    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();

  3. #3
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    SitePoint Enthusiast
    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.

  5. #5
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh ok, that makes sense. so what could i do if i wanted to make newThumbnailImg a dynamic string?

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,710
    Mentioned
    102 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

  7. #7
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In the second example, how does the variable newThumbnailImg know that the "1" on the last line is num?

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,710
    Mentioned
    102 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

  9. #9
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so this is a shorthand way of passing an argument to a function?

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,710
    Mentioned
    102 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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •