Where to place JavaScript code?
This is the first blog of JavaScript Fundamentals series. In this series, I will explain very basics and fundamental concepts of JavaScript.
In this article, I will explain the basic building blocks of JavaScript. I will be explaining about where should we put the JavaScript code in our HTML page. You will also learn about external and internal scripts in this article. Let's get started now.
The <script> tag
JavaScript code can be inserted in HTML by using the <script> tags. All of JavaScript code must be placed between <script> tag. Scripts that we write inside <script> tag are called Internal Scripts.
<!DOCTYPE HTML>
<html>
<body>
<p>JavaScript is added! Yeah....</p>
<script>
alert( 'Hello, world!' );
</script>
</body>
</html>This is easy, right?
Now, open your code editor and write your first JavaScript code and save it. If you have no idea which editor to use, then consider reading this article.
Open your HTML file in your favorable browser and have a look at the result of your first code in JavaScript. You will see a dialog box conveying "Hello, world". Congrats!!, you just wrote a bug-free JavaScript code.
<script> tag Attributes
The <script> tag comes with a couple of attributes. These attributes are not used nowadays, but you should know the work of these attributes. In the previous versions of HTML, it was mandatory to use these attributes but these are deprecated now. You should know the use of these attributes because there are good chances that you might deal with old scripts in your developer career.
The type attribute: The type attribute specifies the Internet media type (formerly known as MIME type) of a script. You can define any MIME type as an value to type attributes. Most commonly used values are
-
application/javascript -
application/ecmascript -
text/vbscript
<script type = "text/javascript"></script>
type attribute is also being used with other tags like style, source, link, embed. For example, If we want to use CSS in our HTML page, we will include type attribut as text/css in link tag.
The HTML4 (old standard of HTML) required script tag to have type attribute, but now the latest version HTML5 doesn't demand it. Modern version of HTML (HTML5) assumes this type attribute by default as application/javascript. But if you want to change the script type, then you will require to define it. For example, if you want to use text/vbscript instead of javascript, then you can define it..
The language attribute: The language tag has been deprecated for a long time. It is no longer used in modern scripts. This attribute was used to specify the scripting language that is being used.
What and Why External Scripts?
External scripts are those scripts which are not embedded in HTML file and are kept in a separate file. It's a good practice to large and common scripts in a separate file, it makes your HTML code shorter, readable and much much easy to edit.
Suppose that there are 5 pages in a website that needs same scripts. Then instead of writing the same code in 5 different pages, again and again, we can write the script in a separate file and attach this single script file to multiple HTML pages. Separating large or common scripts makes your page load faster, increases the readability, saves a lot of time and makes code easy to edit.
How it helps loading page faster?
When you have external JS files – the browser usually caches these files when you open that page first time. Hence the next time you open the site, it is already there on client side.
External Scripts
Let's see how to attach script files to our HTML. Script tags use src attribute for attaching script files. src attribute is used to specify link or path to our script file. You can think of this src attribute as a URL. Like a URL, src holds the path of the script file.
For instance:
<script src = "public/js/frontend/main.js"></script>
"public/js/frontend/main.js" is a path to the script file holding the scripts. It's an absolute path to our script file.
If the script file is located in the same folder as in which the HTML file is located. Then we can attach the script file by relative path.
For instance:
<script src = "main.js"></script>
Suppose your JavaScript file is coming from CDN's server, then it is necessary to give full URL. Like this
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/cjs/react.development.js"><script>
It is also possible to include multiple external scripts. We can import as many external scripts as we want.
// Import as many scripts you want. <script src = "main.js"></script> <script src = "render.js"></script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/cjs/react.development.js"></script>
These are the ways by which we can attach JavaScript code in our HTML. Hope, you liked this article.
That's all for this topic. If you guys have any suggestions or queries, feel free to drop a comment. We would be happy to add that in our post. You can also contribute your articles by creating contributor account here.
Happy Learning 🙂
If you like the content on CodePumpkin and if you wish to do something for the community and the planet Earth, you can donate to our campaign for planting more trees at CodePumpkin Cauvery Calling Campaign.
We may not get time to plant a tree, but we can definitely donate ₹42 per Tree.
About the Author
Tags: External Scripts, Internal Scripts, javascript, Script Tag
Comments and Queries
If you want someone to read your code, please put the code inside <pre><code> and </code></pre> tags. For example:<pre><code class="java"> String foo = "bar"; </code></pre>For more information on supported HTML tags in disqus comment, click here.
