• Tuesday , 19 September 2017

Inline vs external javascript

Code Canyon



Link for all dot net and sql server video tutorial playlists
http://www.youtube.com/user/kudvenkat/playlists

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspot.com/2014/11/inline-vs-external-javascript.html

In this video we will discuss
1. Different places where JavaScript can be present
2. Advantages of external JavaScript over inline JavaScript

JavaScript can be stored either inline on the page or in an external .js file. Let’s look at an example of both the approaches.

Inline JavaScript example : In this example, IsEven() JavaScript function is present inline on the page.
[html] [head] [script type=”text/javascript”] function IsEven()
{
var number = document.getElementById(“TextBox1″).value;
if (number % 2 == 0)
{
alert(number + ” is even number”);
}
else
{
alert(number + ” is odd number”);
}
}
[/script] [/head] [body] [form id=”form1″ runat=”server”] Number :
[asp:TextBox ID=”TextBox1″ runat=”server”][/asp:TextBox] [input type=”button” value=”Check Number” onclick=”IsEven()” /] [/form] [/body] [/html]

External JavaScript example : Steps to store JavaScript in an external .js file
1. In Visual Studio, right click on the project name in Solution Explorer and select add select Add =] New Item
2. From the “Add New Item” dialog box select “JScript File”. Name the file “ExternalJavaScript.js” and click Add.
3. Copy and paste the following JavaScript function in the “ExternalJavaScript.js” file

function IsEven()
{
var number = document.getElementById(“TextBox1″).value;
if (number % 2 == 0)
{
alert(number + ” is even number”);
}
else
{
alert(number + ” is odd number”);
}
}

4. On your webform in the head section include a reference to the external JavaScript file using script element as shown below
[script type=”text/javascript” src=”ExternalJavaScript.js”][/script]

5. At this point the HTML on your webform should be as shown below.
[html] [head] [script type=”text/javascript” src=”ExternalJavaScript.js”][/script] [/head] [body] [form id=”form1″ runat=”server”] Number :
[asp:TextBox ID=”TextBox1″ runat=”server”][/asp:TextBox] [input type=”button” value=”Check Number” onclick=”IsEven()” /] [/form] [/body] [/html]

Advantages of external JavaScript over inline JavaScript : Here are some of the general advantages of external JavaScript over inline JavaScript

Maintainability : JavaScript in external files can be referenced on multiple pages without having to duplicate the code inline on every page. If something has to change, you only have one place to change. So external JavaScript code can be reused and maintenance will be much easier.

Separation of Concerns : Storing JavaScript in a separate external .js file adheres to Separation of concerns design principle. In general it is a good practice to separate HTML, CSS and JavaScript as it makes it easier working with them. Also allows multiple developers to work simultaneously.

Performance : An external JavaScript file can be cached by the browser, where as an inline JavaScript on the page is loaded every time the page loads.

Original source

3d Ocean

Related Posts

11 Comments

  1. Liam Gallagher
    July 5, 2017 at 05:53

    thanks

  2. Mes Yaner
    July 5, 2017 at 05:53

    noob

  3. Shwetang Singh
    July 5, 2017 at 05:53

    nice sir,,,

  4. David Shuo Huang
    July 5, 2017 at 05:53

    NAMESPACE:)!

  5. Baya Nasser
    July 5, 2017 at 05:53

    Several additions to the sites and blogs is a JavaScript code, how it can be controlled, where we can put it in the right place.

  6. YJM YJM
    July 5, 2017 at 05:53

    You make some of the clearest, most concise web Dev tutorials on YouTube. Thank you.

  7. camadan84
    July 5, 2017 at 05:53

    +kudvenkat You said "asp.net button post the form to the server" but previous videos(validation) u used asp.net button control and it didnt post the form? Am i wrong?

  8. Truman Kwong
    July 5, 2017 at 05:53

    thank you, very good

  9. Nazeer Basha Shaik
    July 5, 2017 at 05:53

    Thank you very much Sir ..

  10. Vivek Sharma
    July 5, 2017 at 05:53

    Excellent sir, waiting for jQuerry video …. great 🙂

  11. RAMCHANDRA THAKKAR
    July 5, 2017 at 05:53

    Great..

Leave A Comment

You must be logged in to post a comment.