{"id":9298,"date":"2022-03-24T05:27:00","date_gmt":"2022-03-24T05:27:00","guid":{"rendered":"https:\/\/www.temok.com\/blog\/?p=9298"},"modified":"2024-06-21T10:54:33","modified_gmt":"2024-06-21T06:54:33","slug":"how-to-add-javascript-to-html","status":"publish","type":"post","link":"https:\/\/www.temok.com\/blog\/how-to-add-javascript-to-html\/","title":{"rendered":"How To Add JavaScript To HTML: An Ultimate Guide"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 5<\/span> <span class=\"rt-label rt-postfix\">min read<\/span><\/span>\r\n<p>JavaScript is a programming language, also known as JS. It is used in web development to create advanced and interactive web pages. The word &#8220;script&#8221; is used for those languages that are not independent, and here it refers to JavaScript, which runs on the client machine. In other words, you can say that the word scripting is used for the languages that require the support of another programming language to get accomplished or executed. This article will guide you on how to add JavaScript to HTML.<\/p>\r\n\r\n\r\n\r\n<p>JavaScript also executes with the help of HTML or being integrated into HTML code. You can use JavaScript in different ways to generate warning messages,<\/p>\r\n\r\n\r\n\r\n<p>JavaScript is used in several web pages, such as generating warning messages, building image galleries, document object model manipulation, form authentication, and more.<\/p>\r\n\r\n\r\n\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69ffa0f593f98\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69ffa0f593f98\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.temok.com\/blog\/how-to-add-javascript-to-html\/#Advantages_of_JavaScript\" >Advantages of JavaScript<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.temok.com\/blog\/how-to-add-javascript-to-html\/#Less_Server_Interaction\" >Less Server Interaction<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.temok.com\/blog\/how-to-add-javascript-to-html\/#User-Friendly_Interfaces\" >User-Friendly Interfaces<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.temok.com\/blog\/how-to-add-javascript-to-html\/#Instant_Feedback_To_The_User\" >Instant Feedback To The User<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.temok.com\/blog\/how-to-add-javascript-to-html\/#Easy_Debugging\" >Easy Debugging<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.temok.com\/blog\/how-to-add-javascript-to-html\/#How_To_Add_JavaScript_To_HTML\" >How To Add JavaScript To HTML<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.temok.com\/blog\/how-to-add-javascript-to-html\/#Adding_JavaScript_to_HTML_File\" >Adding JavaScript to HTML File<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.temok.com\/blog\/how-to-add-javascript-to-html\/#Adding_a_Separate_JavaScript_File_To_the_HTML_Code\" >Adding a Separate JavaScript File To the HTML Code<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.temok.com\/blog\/how-to-add-javascript-to-html\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\" id=\"advantages-of-javascript\"><span class=\"ez-toc-section\" id=\"Advantages_of_JavaScript\"><\/span><strong>Advantages of JavaScript<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<p>As you know, JavaScript is a <a href=\"https:\/\/www.blog.temok.com\/top-10-scripting-languages\/\" target=\"_blank\" rel=\"noreferrer noopener\">scripting language<\/a>. First, JavaScript is also known as LiveScript. Later on, it is known as JavaScript. Following are some of the best advantages of using JavaScript:<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"less-server-interaction\"><span class=\"ez-toc-section\" id=\"Less_Server_Interaction\"><\/span><strong>Less Server Interaction<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\n\r\n\r\n<p>If you want to increase the speed of your website, the best method is to lessen the communication with the server. JavaScript helps in this regard by verifying user input on the client side. After running the initial validation control, it only sends requests to the server. In this way, the number of requests to the server was minimized remarkably.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"user-friendly-interfaces\"><span class=\"ez-toc-section\" id=\"User-Friendly_Interfaces\"><\/span><strong>User-Friendly Interfaces<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\n\r\n\r\n<p>You can create modern, advanced, and interactive client-side interfaces. For example, you can add sliders, slideshows, drag-and-drop features, etc.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"instant-feedback-to-the-user\"><span class=\"ez-toc-section\" id=\"Instant_Feedback_To_The_User\"><\/span><strong>Instant Feedback To The User<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\n\r\n\r\n<p>If you are using JavaScript, you can ensure that users get instant feedback. For example, if there are two users, one has filled a form, and the other one has left the form empty. They will have to wait for the page to reload without JavaScript validation. However, with JavaScript, they will be changed immediately.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"easy-debugging\"><span class=\"ez-toc-section\" id=\"Easy_Debugging\"><\/span><strong>Easy Debugging<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\n\r\n\r\n<p>JavaScript is an interpreted language. It means that written code breaks line by line. If any error occurs, you can see the line number where the error occurs.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"how-to-add-javascript-to-html\"><span class=\"ez-toc-section\" id=\"How_To_Add_JavaScript_To_HTML\"><\/span><strong>How To Add JavaScript To HTML<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<p>There are two methods of adding JavaScript to HTML and making them work together. We have seen the advantages of JavaScript; let&#8217;s look at some ways we can link JS to HTML.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"adding-javascript-to-html-file\"><span class=\"ez-toc-section\" id=\"Adding_JavaScript_to_HTML_File\"><\/span><strong>Adding JavaScript to HTML File<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\n\r\n\r\n<p>Add JavaScript code in an HTML document by implementing the dedicated HTML tag &lt;script&gt; that completes with JavaScript code.<\/p>\r\n\r\n\r\n\r\n<p>Place the &lt;script&gt; tag in the &lt;head&gt; section of your HTML or the &lt;body&gt; section. It depends on when you want the JavaScript to load.<\/p>\r\n\r\n\r\n\r\n<p>JavaScript code is written in the document &lt;head&gt; section to keep them included and out of the main content of your HTML document.<\/p>\r\n\r\n\r\n\r\n<p>Within the page&#8217;s layout, if your script requires optimization at a certain point, like when using a document. write to create content \u2014 you should put it at the point where it should be called, usually within the &lt;body&gt; section.<\/p>\r\n\r\n\r\n\r\n<p>Let&#8217;s ponder upon the following blank HTML document with a browser title of Today&#8217;s Date:<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"wp-image-9300 aligncenter\" src=\"https:\/\/i0.wp.com\/www.blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_1.png?resize=750%2C341&#038;ssl=1\" alt=\"Adding JavaScript to HTML File , How To Add JavaScript To HTML \" width=\"750\" height=\"341\" srcset=\"https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_1.png?w=1002&amp;ssl=1 1002w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_1.png?resize=300%2C137&amp;ssl=1 300w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_1.png?resize=768%2C350&amp;ssl=1 768w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_1.png?resize=24%2C11&amp;ssl=1 24w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_1.png?resize=36%2C16&amp;ssl=1 36w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_1.png?resize=48%2C22&amp;ssl=1 48w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>At this point, this file includes only HTML markup. We want to discuss further how to add JavaScript to HTML documents:<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"95\" class=\"wp-image-9301 aligncenter\" src=\"https:\/\/i0.wp.com\/www.blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_2.png?resize=500%2C95&#038;ssl=1\" alt=\"Adding JavaScript to HTML File , How To Add JavaScript To HTML \" srcset=\"https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_2.png?w=500&amp;ssl=1 500w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_2.png?resize=300%2C57&amp;ssl=1 300w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_2.png?resize=24%2C5&amp;ssl=1 24w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_2.png?resize=36%2C7&amp;ssl=1 36w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_2.png?resize=48%2C9&amp;ssl=1 48w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>It allows the webpage to show a notification with the current date. You can add a &lt;script&gt; tag with JavaScript code in an HTML file.<\/p>\r\n\r\n\r\n\r\n<p>Add JavaScript code within the &lt;head&gt; tags, pointing to the browser to run the JavaScript code. We can also add JavaScript below the &lt;title&gt; tag as shown below:<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-9302\" src=\"https:\/\/i0.wp.com\/www.blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_3.png?resize=750%2C393&#038;ssl=1\" alt=\"Adding JavaScript to HTML File , How To Add JavaScript To HTML \" width=\"750\" height=\"393\" srcset=\"https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_3.png?w=1004&amp;ssl=1 1004w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_3.png?resize=300%2C157&amp;ssl=1 300w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_3.png?resize=768%2C402&amp;ssl=1 768w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_3.png?resize=24%2C13&amp;ssl=1 24w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_3.png?resize=36%2C19&amp;ssl=1 36w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_3.png?resize=48%2C25&amp;ssl=1 48w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>Once the page has loaded, you receive an alert shown below:<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-9303\" src=\"https:\/\/i0.wp.com\/www.blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_4-1024x278.png?resize=750%2C204&#038;ssl=1\" alt=\" Adding JavaScript to HTML File, How To Add JavaScript To HTML \" width=\"750\" height=\"204\" srcset=\"https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_4.png?resize=1024%2C278&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_4.png?resize=300%2C81&amp;ssl=1 300w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_4.png?resize=768%2C208&amp;ssl=1 768w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_4.png?resize=24%2C7&amp;ssl=1 24w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_4.png?resize=36%2C10&amp;ssl=1 36w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_4.png?resize=48%2C13&amp;ssl=1 48w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_4.png?w=1308&amp;ssl=1 1308w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>As you can see in the below example, if you need some changes shown in the body of HTML, we would require that after the &lt;head&gt; section, so that is shown on the page.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-9304\" src=\"https:\/\/i0.wp.com\/www.blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_5.png?resize=750%2C380&#038;ssl=1\" alt=\"Adding JavaScript to HTML File , How To Add JavaScript To HTML \" width=\"750\" height=\"380\" srcset=\"https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_5.png?w=998&amp;ssl=1 998w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_5.png?resize=300%2C152&amp;ssl=1 300w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_5.png?resize=768%2C389&amp;ssl=1 768w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_5.png?resize=24%2C12&amp;ssl=1 24w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_5.png?resize=36%2C18&amp;ssl=1 36w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_5.png?resize=48%2C24&amp;ssl=1 48w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>The output of the above code is shown like this:<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-9305\" src=\"https:\/\/i0.wp.com\/www.blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_6-1024x291.png?resize=750%2C213&#038;ssl=1\" alt=\" seen the advantages of JavaScript; let's look at some ways we can link JS to HTML.  Adding JavaScript to HTML File ,How To Add JavaScript To HTML \" width=\"750\" height=\"213\" srcset=\"https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_6.png?resize=1024%2C291&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_6.png?resize=300%2C85&amp;ssl=1 300w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_6.png?resize=768%2C218&amp;ssl=1 768w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_6.png?resize=24%2C7&amp;ssl=1 24w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_6.png?resize=36%2C10&amp;ssl=1 36w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_6.png?resize=48%2C14&amp;ssl=1 48w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_6.png?w=1304&amp;ssl=1 1304w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>Scripts that are no longer and can run only on one-page work very well within HTML files, but if the scripts are long and run on more than one page, then it is not a productive or effective solution because larger scripts are challenging to read and understand. We further discuss how to manage separate JavaScript files in HTML documents.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"adding-a-separate-javascript-file-to-html-code\"><span class=\"ez-toc-section\" id=\"Adding_a_Separate_JavaScript_File_To_the_HTML_Code\"><\/span><strong>Adding a Separate JavaScript File To the HTML Code<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\n\r\n\r\n<p>Sometimes, it is not suitable to embed JavaScript in HTML directly. Mainly, JS scripts are used on different pages, so it is best to keep JavaScript code in separate files. The most suitable method to add JavaScript to HTML is external file importing. These files can be validated within HTML documents, just like CSS documents. Here are some benefits of linking JavaScript to HTML separately.<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>When you add JavaScript and HTML code separately, it makes everything easy, maintainable, and reusable.<\/li>\r\n<li>Code readability and maintenance become very easy.<\/li>\r\n<li>Cached JavaScript files enhance overall website performance by decreasing the time taken by pages to load.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p>Let&#8217;s explain a small web project on linking JS files to HTML documents. It includes script.js in the js\/ directory, style.css in the CSS\/ directory, and a main index.html file in the project&#8217;s root.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-9306\" src=\"https:\/\/i0.wp.com\/www.blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_7.png?resize=750%2C200&#038;ssl=1\" alt=\"Adding a Separate JavaScript File To HTML Code , How To Add JavaScript To HTML \" width=\"750\" height=\"200\" srcset=\"https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_7.png?w=999&amp;ssl=1 999w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_7.png?resize=300%2C80&amp;ssl=1 300w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_7.png?resize=768%2C204&amp;ssl=1 768w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_7.png?resize=24%2C6&amp;ssl=1 24w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_7.png?resize=36%2C10&amp;ssl=1 36w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_7.png?resize=48%2C13&amp;ssl=1 48w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>We can begin with our previous HTML document from the section above:<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-9307\" src=\"https:\/\/i0.wp.com\/www.blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_8.png?resize=750%2C319&#038;ssl=1\" alt=\" Adding a Separate JavaScript File To HTML Code , How To Add JavaScript To HTML \" width=\"750\" height=\"319\" srcset=\"https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_8.png?w=1000&amp;ssl=1 1000w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_8.png?resize=300%2C128&amp;ssl=1 300w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_8.png?resize=768%2C326&amp;ssl=1 768w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_8.png?resize=24%2C10&amp;ssl=1 24w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_8.png?resize=36%2C15&amp;ssl=1 36w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_8.png?resize=48%2C20&amp;ssl=1 48w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>You will see how JavaScript code shows the date as a &lt;h1&gt; header to the script.file:<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1002\" height=\"163\" class=\"wp-image-9308 aligncenter\" src=\"https:\/\/i0.wp.com\/www.blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_9.png?resize=1002%2C163&#038;ssl=1\" alt=\"Adding a Separate JavaScript File To HTML Code , How To Add JavaScript To HTML \" srcset=\"https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_9.png?w=1002&amp;ssl=1 1002w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_9.png?resize=300%2C49&amp;ssl=1 300w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_9.png?resize=768%2C125&amp;ssl=1 768w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_9.png?resize=24%2C4&amp;ssl=1 24w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_9.png?resize=36%2C6&amp;ssl=1 36w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_9.png?resize=48%2C8&amp;ssl=1 48w\" sizes=\"auto, (max-width: 1002px) 100vw, 1002px\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>With the help of the following code, You can also add a reference to this script to the &lt;body&gt; section.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"996\" height=\"90\" class=\"wp-image-9309 aligncenter\" src=\"https:\/\/i0.wp.com\/www.blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_10.png?resize=996%2C90&#038;ssl=1\" alt=\"How To Add JavaScript To HTML  , Adding a Separate JavaScript File To HTML Code\" srcset=\"https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_10.png?w=996&amp;ssl=1 996w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_10.png?resize=300%2C27&amp;ssl=1 300w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_10.png?resize=768%2C69&amp;ssl=1 768w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_10.png?resize=24%2C2&amp;ssl=1 24w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_10.png?resize=36%2C3&amp;ssl=1 36w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_10.png?resize=48%2C4&amp;ssl=1 48w\" sizes=\"auto, (max-width: 996px) 100vw, 996px\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>The &lt;script&gt; tag signifies the script.js file in the js\/ directory of our web project. Let&#8217;s consider this line in the context of our HTML file within the &lt;body&gt; section:<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-9310\" src=\"https:\/\/i0.wp.com\/www.blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_11.png?resize=750%2C375&#038;ssl=1\" alt=\"Adding a Separate JavaScript File To HTML Code , How To Add JavaScript To HTML \" width=\"750\" height=\"375\" srcset=\"https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_11.png?w=1007&amp;ssl=1 1007w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_11.png?resize=300%2C150&amp;ssl=1 300w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_11.png?resize=768%2C384&amp;ssl=1 768w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_11.png?resize=24%2C12&amp;ssl=1 24w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_11.png?resize=36%2C18&amp;ssl=1 36w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_11.png?resize=48%2C24&amp;ssl=1 48w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>You can also edit the style.css file by adding background color and styles to the &lt;h1&gt; header:<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-9316\" src=\"https:\/\/i0.wp.com\/www.blog.temok.com\/wp-content\/uploads\/2022\/03\/style.css.png?resize=750%2C257&#038;ssl=1\" alt=\"Style.css file\" width=\"750\" height=\"257\" srcset=\"https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/style.css.png?w=1005&amp;ssl=1 1005w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/style.css.png?resize=300%2C103&amp;ssl=1 300w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/style.css.png?resize=768%2C263&amp;ssl=1 768w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/style.css.png?resize=24%2C8&amp;ssl=1 24w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/style.css.png?resize=36%2C12&amp;ssl=1 36w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/style.css.png?resize=48%2C16&amp;ssl=1 48w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>You can also reference the <a href=\"https:\/\/www.w3schools.com\/html\/html_css.asp\" target=\"_blank\" rel=\"noopener\">CSS file<\/a> within the &lt;head&gt; section of our HTML document:<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image\">\r\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-9312\" src=\"https:\/\/i0.wp.com\/www.blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_13.png?resize=750%2C385&#038;ssl=1\" alt=\"Adding a Separate JavaScript File To HTML Code , How To Add JavaScript To HTML \" width=\"750\" height=\"385\" srcset=\"https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_13.png?w=998&amp;ssl=1 998w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_13.png?resize=300%2C154&amp;ssl=1 300w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_13.png?resize=768%2C394&amp;ssl=1 768w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_13.png?resize=24%2C12&amp;ssl=1 24w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_13.png?resize=36%2C18&amp;ssl=1 36w, https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/Screenshot_13.png?resize=48%2C25&amp;ssl=1 48w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>Now, you can load the index.html file on the web browser of your choice with the help of JavaScript and CSS.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><strong>Conclusion<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<p>In this article, we have discussed how to use JavaScript in HTML. JavaScript can be used in combination with HTML to run modern and advanced web applications that are intuitive, interactive, and user-friendly. Using simple client-side validation reduces server traffic and improves the overall performance and efficiency of the website.<\/p>\r\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 5<\/span> <span class=\"rt-label rt-postfix\">min read<\/span><\/span>JavaScript is a programming language, also known as JS. It is used in web development to create advanced and interactive web pages. The word &#8220;script&#8221; is used for those languages that are not independent, and here it refers to JavaScript, which runs on the client machine. In other words, you can say that the word [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":9299,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"pmpro_default_level":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[23],"tags":[1610,1611,1609,1607,1608],"class_list":["post-9298","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-adding-a-separate-javascript-file-to-html-code","tag-adding-javascript-to-html-file","tag-advantages-of-javascript","tag-how-to-add-javascript-to-html","tag-javascript-to-html","pmpro-has-access"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blog.temok.com\/wp-content\/uploads\/2022\/03\/javasc-ript.jpg?fit=750%2C500&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.temok.com\/blog\/wp-json\/wp\/v2\/posts\/9298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.temok.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.temok.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.temok.com\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.temok.com\/blog\/wp-json\/wp\/v2\/comments?post=9298"}],"version-history":[{"count":5,"href":"https:\/\/www.temok.com\/blog\/wp-json\/wp\/v2\/posts\/9298\/revisions"}],"predecessor-version":[{"id":14688,"href":"https:\/\/www.temok.com\/blog\/wp-json\/wp\/v2\/posts\/9298\/revisions\/14688"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.temok.com\/blog\/wp-json\/wp\/v2\/media\/9299"}],"wp:attachment":[{"href":"https:\/\/www.temok.com\/blog\/wp-json\/wp\/v2\/media?parent=9298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.temok.com\/blog\/wp-json\/wp\/v2\/categories?post=9298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.temok.com\/blog\/wp-json\/wp\/v2\/tags?post=9298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}