Sql server, .
net and c# video tutorial
Free C#, .Net and Sql server video tutorial for beginners and intermediate
programmers.
Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs
Subscribe Download
Where should the script tag be placed in html
Suggested Videos
Part 4 - How to debug javascript in visual studio
Part 5 - Tools for learning JavaScript
Part 6 - Inline vs external javascript
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.
JavaScript tutorial
Email This
BlogThis!
Share to Twitter
Share to Facebook
Share to Pinterest
5 comments:
AnonymousNovember 6, 2014 at 12:12 PM
its good to know about the page loading of html n javascript..really helpful
information.
Reply
PraBhaKar SirnaJanuary 1, 2016 at 8:59 AM
Sir your great like god to us , taking time and explaining us god bless you sir
Reply
hassan690November 25, 2016 at 10:54 PM
sir honestly I cant stop myself to prevent to watchiing your tutorials... honesty
looking foorward to get involved in your class
Reply
AnonymousJuly 5, 2017 at 8:17 AM
what happens if user makes an action involving javascript execution before
javascript file is downloaded
Reply
asharMarch 18, 2018 at 1:32 AM
I have tried this and its working
window.onload = function () {
document.getElementById("TextBox1").style.backgroundColor = "red";
} so we can apply this as well sir
Reply
It would be great if you can help share these free resources
Newer PostOlder PostHome
Subscribe to: Post Comments (Atom)
Pragim Technologies - Best software training and placements in marathahalli,
bangalore. For further details please call 09945699393.
Complete Tutorials
How to become a full stack web developer
Cloud computing complete tutorial
Healthy food for healthy mind and body
JavaScript tutorial
Bootstrap tutorial
Angular tutorial for beginners
Angular 5 Tutorial for beginners
Important Videos
The Gift of Education
Web application for your business
How to become .NET developer
Resources available to help you
Dot Net Video Tutorials
Blazor tutorial
C tutorial
ASP.NET Core Tutorial
ASP.NET Core Razor Pages Tutorial
Angular 6 Tutorial
Angular CRUD Tutorial
Angular CLI Tutorial
Angular 2 Tutorial
Design Patterns
SOLID Principles
ASP.NET Web API
Bootstrap
AngularJS Tutorial
jQuery Tutorial
JavaScript with ASP.NET Tutorial
JavaScript Tutorial
Charts Tutorial
LINQ
LINQ to SQL
LINQ to XML
Entity Framework
WCF
ASP.NET Web Services
Dot Net Basics
C#
SQL Server
ADO.NET
ASP.NET
GridView
ASP.NET MVC
Visual Studio Tips and Tricks
Dot Net Interview Questions
Slides
Entity Framework
WCF
ASP.NET Web Services
Dot Net Basics
C#
SQL Server
ADO.NET
ASP.NET
GridView
ASP.NET MVC
Visual Studio Tips and Tricks
Java Video Tutorials
Part 1 : Video | Text | Slides
Part 2 : Video | Text | Slides
Part 3 : Video | Text | Slides
Interview Questions
C#
SQL Server
Written Test
Powered by Blogger.
