Anyone Know, why We use external javascript?

What are pros of using an external javascript file? I just can't figure it out, I see big websites using them all around several times instead of server-side includes. Is it just for caching?
If it's a matter of clean code and seperation of concerns, then you can still include it from the serverside into the html. For example I use SMARTY and I can just include the file {include file='javascript.js} inside <script></script> tages. If it's for performance I can't see anything other than an extra http request that makes the external file slower involved. I'm sure I must be missing something because all the big websites still do this.
Is it because of caching the file? my javascripts are dynamic and shouldn't be cached anyway.
could someone help me out to make the right decision to choose what to do with my javascript files.
ps:can a 1.5K user create a tag for external-javascript?

Answer Is:

In Your case, The most important is that the file is cached by the browser. The fewer bytes that need to be sent from the server the better. This is a big part of web performance.

Second to that, it provides modularity.
I'm not sure why your JavaScript is dynamic, but I suggest you rewrite it in a way that removes that need. That in itself might be an issue for you down the road.

Improve the design of GUI/website [closed]

So i am using visual studio 2008, asp.net 3.5, with the basic toolkit provided.
Now i have made the gui which a lot of functionality but the design is very basic. and looks too old.
I need to give it a new look, a new feeling new designs....
like the gridview, the buttons the textboxes, the menus look basic... this is not working for me.
Please let me how should i go about doing this.?? 1) i have herd about tool kits but dont kno which ones are good..(dont want the really expensive ones) but if it is really good my company is ready to spend.
2) will the new VS 2010 or asp.net 4.0 make a difference.
3) The ajax toolkit or silverlight toolkit is any good?
4) i also need to show Charts and graphs now, currently using MS charts.. but now i need which is good.

Answer is:

Your best bet is to ask very specific questions at a more appropriate forum.
For ideas on designs, look for examples online and do something similar to what you like.

http://www.thecssawards.com/
http://www.csselite.com/

For questions on how to implement a specific design in html/asp.net/whatever, post a very specific question here.
For UI guidance on how to make something specific look better, post a question on http://ui.stackexchange.com. Include a SMALL screen shot of the applicable controls (not the whole page, just the part you're asking about, or at least highlight the part you're asking about).
.NET 3.5 vs .NET 4 will have no real effect on the design of your site. Whether your choose HTML or Silverlight will have a huge effect, but neither is generally better for all sites and switching between them basically means rewriting everything, so you wouldn't do it just for design reasons.

How to replace src attribute name with data attribute name

I have a html document which uses object tag with src attribute. But I need to replace src(attribute name) with "data" (attribute name).
Is it possible to do so using JavaScript? All I referred shows that we can change the attribute values, but I couldnt find any method to replace attribute node name.
Could someone please help

Answer is:


You will have to get the src attribute value and set that to the data attribute value.
You can use .removeAttribute() if you want to get rid of the src attributes.
Something like this:

var att = element.getAttribute("src");
element.setAttribute("data", att);
element.removeAttribute("src");

jsFiddle example

If you want to do a bunch of elements, just select them and do a for loop. For example going over all divs:

var att, i, elie = document.getElementsByTagName("div");
for (i = 0; i < elie.length; ++i)
{
    att = elie[i].getAttribute("src");
    elie[i].setAttribute("data", att);
    elie[i].removeAttribute("src");        }

How to return and use an array of strings from a jQuery ajax call?

I'm using Google App Engine (Python) along with jQuery for Ajax calls to the server. I have a page where I want to load up a list of strings in Javascript from an Ajax call to the server.
The server method I want to invoke:

class BrowseObjects(webapp.RequestHandler):
    def get(self):
        ids_to_return = get_ids_to_return()
        // TODO: How to return these ids to the invoking ajax call?
        self.response.out.write(ids_to_return)

The HTML page where I want to be able to access the returned ids:

    var strings_from_server = new Array();

    $.ajax({
        type: "GET",
        url: "/get_ids.html",
        success: function(responseText){
            // TODO: How to read these IDS in here?
            strings_from_server = responseText                
        },
            error: function (xhr, ajaxOptions, thrownError){
            alert(xhr.responseText);
        }
    });

My experience with Ajax is limited-- I've only used them to store data to the server (a-la POST commands) and so I really have no idea how to get data back from the server. Thanks in advance for all help

Answer is:

It's probably not the cleanest solution, but it will work. Since they are just IDs, it sounds like it's safe to push them directly into a string.

class BrowseObjects(webapp.RequestHandler):
    def get(self):
       ids_to_return = get_ids_to_return()

       response_html = '["'
       response_html += ids_to_return.join('","')
       # Edit: since my ids are Key objects (not strings)
       # I had to use the following instead:
       # response_html += '","'.join(map(str, ids_to_return))
       response_html += '"]'

       self.response.out.write(response_html)

and

var strings_from_server = new Array();

$.getJSON("/get_ids.html", function(responseData){

    strings_from_server = responseData;
});

You can check to see if the response was empty incase of an error, and you can use $.each to loop through the results.
I am using jQuerys getJSON feature to automatically parse the response. Since I'm just returning a json list, it will generate the array of data in the strings_from_server variable.

What is URL Hash oddities in Javascript?

I've noticed some strange behaviour in JS

window.location.hash = '';
var hash = window.location.hash;
alert(hash + ' = ' + hash.length);
//outputs: ' = 0'
window.location.hash = '#';
var hash = window.location.hash;
alert(hash + ' = ' + hash.length);
//outputs: ' = 0'
window.location.hash = '_';
hash = window.location.hash;
alert(hash + ' = ' + hash.length);
//outputs: '_ = 2'

basically I want to trigger three conditions

1. no hash
2. just hash
3. hash with text

however it seems like JS doesn't see the difference between example.com/ and example.com/# Also I can't figure out how to remove the hash completely.
Any help?


Answer is:

1. Once the hash is set, you cannot remove it altogether (eg, remove the # sign) without causing a page reload; this is normal behavior.
2. Setting an empty/null hash and setting the hash to the default hash (#) are treated the same; this is just internal behavior. Not sure if all browsers handle it consistently, but IIRC that is the case.

Ultimately if you want to remove the hash completely, you would have to do document.location.href = document.location.href, to reload the page (window.location.reload() would keep the hash).

Javascript: How to call function using the value stored in a variable?

I have a variable

var functionName="giveVote";

What I need to do is, I want to call function stored in var functionName. I tried using functionName(); . But its not working. Please help.
Edit Based on the same problem, I have

$(this).rules("add", {txtInf: "^[a-zA-Z'.\s]{1,40}$" }); 

rules is a predifined function which takes methodName:, here I have hardcoded txtInf. But I want to supply a javascript variable here, to make my code generic. var methodName="txtInf";
Here I want to evaluate methodName first before being used in rules function.

$(this).rules("add", {mehtodName: "^[a-zA-Z'.\s]{1,40}$" });

Answer is:

Why not just pass the string directly to where you want to call the function? Why store it first? That seems more confusing as it is another layer of indirection (and, ultimately, can make your code more difficult to debug).
For example:

$('.someSelector').click(giveVote);

I don't see a particular advantage to doing what you're trying to do.