asp.net core docker Where should the script tag be placed in html

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

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspo...

In this video we will discuss, where should the script tag be placed in the html. Should it be placed in the body or head section of the page. In general the script tag can be placed either in the head or body section.

Let's look at a few examples :

Example 1 : Script tag in the head section
[html]
[head] [script type="text/javascript"] alert("Welcome to JavaScript Tutorial"); [/script]
[/head]
[body] [form id="form1" runat="server"] [/form]
[/body]
[/html]

Example 2 : Script tag in the body section
[html]
[head]
[/head]
[body] [form id="form1" runat="server"] [/form] [script type="text/javascript"] alert("Welcome to JavaScript Tutorial"); [/script]
[/body]
[/html]

In Example 1 we placed the script tag in the head section and in Example 2, we placed it in body section. In both the cases JavaScript works as expected.

Example 3 : Sets the background color of the TextBox to red.

[html]
[head]
[/head]
[body] [form id="form1" runat="server"] [asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox] [/form] [script type="text/javascript"] document.getElementById("TextBox1").style.backgroundColor = "red"; [/script]
[/body]
[/html]

Example 4 : This is same as Example 3, except we moved the script tag to the head section. In this case the script will not work as expected. Depending on the browser you are using you get one of the following JavaScript error.
Firefox - TypeError: document.getElementById(...) is null
Chrome - Uncaught TypeError: Cannot read property 'style' of null
IE - Unable to get property 'style' of undefined or null reference

To see these JavaScript errors press F12 which launches developer tools. F12 works for all the 3 browsers.

[html]
[head] [script type="text/javascript"] document.getElementById("TextBox1").style.backgroundColor = "red"; [/script]
[/head]
[body] [form id="form1" runat="server"] [asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox] [/form]
[/body]
[/html]

Why did the JavaScript did not work in this case
JavaScript code is present before the textbox control. By the time the JavaScript code is executed, the textbox is still not loaded into browser DOM (Document Object Model). This is the reason JavaScript can't find the textbox and throws a NULL reference error.

In Part 6, we discussed that, in general it is a good practice to store JavaScript in an external .js file. So, if the JavaScript is present in an external file and if you are referencing it on a page using [script] element, where should such [script] element be placed.

To answer this question, first let's understand what happens when a browser starts loading a web page.
1. The browser starts parsing the HTML
2. When the parser encounters a [script] tag that references an external JavaScript file. The parser stops parsing the HTML and the browser makes a request to download the script file. Until the download is complete, the parser is blocked from parsing the rest of the HTML on the page.
3. When the download is complete, that's when the parser will resume to parse the rest of the HTML.

This means the page loading is stopped until all the scripts are loaded which affects user experience.

In general, the suggested good practice is to place the [script] tag just before the closing [body] tag, so it doesn't block the HTML parser. However, modern browsers support async and defer attributes on scripts. These attributes tell the browser it's safe to continue parsing while the scripts are being downloaded. But even with these attributes, from a performance standpoint it is still better to place [script] tag just before closing [body] tag.

According to HTTP/1.1 specification browsers download no more than two components in parallel. So, if the page has several images to download and if you place [script] tags at the top of the page, the script files start to download first which blocks the images download which adds to the total page load time.

asp.net core docker Where should the script tag be placed in html
326 Likes	326 Dislikes
106,746 views views	524K followers
Education	Upload TimePublished on 2 Nov 2014

Related keywords

wcf vs web api,ado.net core,sql server management studio,webkinz,webadvisor,craigslist nj,wcf one piece,asp.net core 3,ajax players,weber grill parts,webtoon,tutorials by hugo,csharp corner,mvc design pattern,asp.net machine account,servers for minecraft,asp.net core dependency injection,ado.net tutorial,services angular,ajax ontario,asp.net mvc tutorial,asp.net cos'è,csharp assembly,tutorialspoint python,sql join,services briefcase,asp.net core web api,ajax jquery,wccftech,craigslist ny,asp.net zero,csharp foreach,server memes,sql date format,services online,chase,serverless architecture,server resume,wcf c#,server books,tutorialspoint javascript,mvcc connect,ado.net mysql,services technologies gps,ajax deadpool,server jobs,cvs,website,mvc tutorial,costco hours,wcf service application,tutorialspoint spring,serverless,wcf soap,wcf cat,cool math games,wcf test client,services & training hse colombia sas,servicestack,citibank,asp.net core identity,sql union,ajax parking,sql database,asp.net core logging,mvconnect,cunyfirst,asp.net guida,wcf nba,csharp download,wcfi foundation,csharp online,wcf authentication,tutorials near me,http://asp.net,server 2019,chernobyl,ado.net descargar,web of dreams,serverminer,ajax cleaner,ado.net visual studio 2019,webassign,ado.net vs entity framework,ado.net visual studio 2017,csharp list,sql like,asp.net mvc,asp.net core tutorial,sqlite,wcfm,ajax roster,mvc architecture,http://ado.net,asp.net core mvc,ajax soccer,server hosting,wcfi,ajax dish soap,capital one,server rack,tutorialspoint html,csharp interface,craigslist,webroot,tutorialspoint reactjs,ajax request,wcf dragon ball,asp.net core 2.2,tutorialspoint python 3,sql developer,webster,services transmission company sas,sql group by,asp.net core signalr,services manager,mvc framework,ajax paving,mvc near me,tutorialspoint spring boot,mvc map,csharp online compiler,asp.net download,sql between,ado.net c# pdf,services tag dell,wcf 2019 nba,csharp switch,ado.net ventajas y desventajas,csharpstar,wcf tutorial,tutorialspoint,ajax meaning,csharp-video-tutorials.blogspot,tutorials dojo,central park 5,csharp string format,ado.net c#,asp.net core github,server status,ajax fc,server jobs nyc,asp.net core swagger,sql formatter,credit karma,services group,server error in '/' application,services windows,asp.net core 3.0,sql injection,tutorialspoint c#,wcf ria services,calculator,ado.net entity data model,sql insert,tutorialspoint tableau,services google play apk,sqlyog,asp.net core 3 release date,sql server,server job description,tutorials by a,servicenow,webcam,mvc hours,webmd symptom,csharp array,csharp enum,ajax call,asp.net core 2. guida completa per lo sviluppatore,asp.net core,server pro,server status ffxiv,cheap flights,webcrims,asp.net core hosting,services sas,tutorialspoint java,tutorialspoint java compiler,webmd,csharp to json,college football,ado.net dataset,csharp dictionary,cnn,website builder,tutorialspoint sql,asp.net web api,server side rendering,weber grills,sql server 2017,tutorialspoint spark,mvc nj,ado.net oracle,asp.net core download,csharp to vb.net,webster bank,webstaurant,tutorialsystems,ajax post,services fms publish announcement,services.msc no abre,ajax jersey,csharp operator,asp.net core razor pages,server duties,asp.net core environment variables,csharp random,century 21,services consultores,services consulting,mvcsd,services.msc,mvcsc,ado.net pdf,asp.net core configuration,ajax marvel,sql update,asp.net tutorial,mvc medical,ado.net entity data model visual studio 2019,wcfs international curriculum,mvc2,ado.net entity data model visual studio 2017,chase online,wcf api,costco,server jobs near me,webex,sql meaning,sql tutorial,sql commands,ado.net entity framework,ajax tavern,tutorialsteacher,ajax javascript,services desk,ajax greek,csharp tutorial,mvc pattern,ado.net sql server,ado.net connection,asp.net identity,mvcu,asp.net core middleware,wcf web service,mvc webadvisor,web store,mvcc,webmail,mvci,mvctc,