{"id":572,"date":"2022-02-26T11:51:52","date_gmt":"2022-02-26T11:51:52","guid":{"rendered":"http:\/\/codebitshub.com\/?p=572"},"modified":"2022-02-28T09:08:07","modified_gmt":"2022-02-28T09:08:07","slug":"link-javascript-in-html","status":"publish","type":"post","link":"https:\/\/codebitshub.com\/link-javascript-in-html\/","title":{"rendered":"If You Read One Article About How To Link Javascript in HTML Read this One"},"content":{"rendered":"<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">As a front-end developer, you will have to master three basic skills. These are HTML, CSS, and Javascript. <span style=\"font-weight: 400;\">The HTML will be used to structure the\u00a0 DOM tree of a page, the CSS is used for styling and the Javascript language for interactivity with a web page. In this article, we are going to see all the possible ways how to link javascript to an HTML page.<\/span><\/span><\/p>\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<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><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><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/codebitshub.com\/link-javascript-in-html\/#Inline_Javascript_Code\" >Inline Javascript Code<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/codebitshub.com\/link-javascript-in-html\/#The_script_tag\" >The script tag<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/codebitshub.com\/link-javascript-in-html\/#Async_vs_Defer\" >Async vs Defer<\/a><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/codebitshub.com\/link-javascript-in-html\/#Async\" >Async<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/codebitshub.com\/link-javascript-in-html\/#Defer\" >Defer<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/codebitshub.com\/link-javascript-in-html\/#How_to_call_an_external_javascript_file\" >How to call an external javascript file<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/codebitshub.com\/link-javascript-in-html\/#Positioning_javascript_code_inside_HTML_document\" >Positioning javascript code inside HTML document<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/codebitshub.com\/link-javascript-in-html\/#The_script_tag_in_the_head_section\" >The script tag in the head section<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/codebitshub.com\/link-javascript-in-html\/#The_script_tag_in_the_body_section\" >The script tag in the body section<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/codebitshub.com\/link-javascript-in-html\/#Modules\" >Modules<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/codebitshub.com\/link-javascript-in-html\/#Importexport\" >Import\/export<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/codebitshub.com\/link-javascript-in-html\/#Characteristics_of_modules\" >Characteristics of modules<\/a><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/codebitshub.com\/link-javascript-in-html\/#Strict_mode\" >Strict mode<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/codebitshub.com\/link-javascript-in-html\/#Scope\" >Scope<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/codebitshub.com\/link-javascript-in-html\/#Module_evaluation\" >Module evaluation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/codebitshub.com\/link-javascript-in-html\/#importmeta\" >import.meta<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/codebitshub.com\/link-javascript-in-html\/#The_%E2%80%98this_keyword\" >The \u2018this\u2019 keyword<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/codebitshub.com\/link-javascript-in-html\/#Modules_are_deferred\" >Modules are deferred<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/codebitshub.com\/link-javascript-in-html\/#Async_with_modules\" >Async with modules<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/codebitshub.com\/link-javascript-in-html\/#External_scripts\" >External scripts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/codebitshub.com\/link-javascript-in-html\/#Bare_modules\" >Bare modules<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/codebitshub.com\/link-javascript-in-html\/#%E2%80%9Cnomodule%E2%80%9D_attribute\" >&#8220;nomodule&#8221; attribute<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/codebitshub.com\/link-javascript-in-html\/#Build_tools\" >Build tools<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/codebitshub.com\/link-javascript-in-html\/#Dynamic_modules_loading\" >Dynamic modules loading<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/codebitshub.com\/link-javascript-in-html\/#Summary\" >Summary<\/a><\/li><\/ul><\/nav><\/div>\n<h4 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Inline_Javascript_Code\"><\/span><span style=\"font-weight: 400;\">Inline Javascript Code<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">In general, you can use this method when you want to add some handling logic on an event that will take place for a DOM element. Let&#8217;s see some examples<\/span><\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/index.html\n&lt;button onclick=&quot;alert(&#039;Hello!&#039;)&quot;&gt;Click me!&lt;\/button&gt;<\/code><\/pre>\n<p style=\"text-align: justify;\">In the code above I use the <strong>onclick<\/strong> event handler to call the<br \/>\nfunction alert when the user clicks the button <strong>Click me!<\/strong><\/p>\n<p style=\"text-align: justify;\"><a href=\"https:\/\/codesandbox.io\/s\/inline-javascript-code-sh5533?file=\/index.html:336-388\" target=\"_blank\" rel=\"noopener\">Codesandbox<\/a><\/p>\n<h4 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"The_script_tag\"><\/span><span style=\"font-weight: 400;\">The script tag<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">In order for you to embed a client-side script, you will have to use the <strong>script<\/strong> tag. Usually, it will point to an external script through the <strong>src<\/strong> attribute.<br \/>\n<\/span><\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/index.html \n&lt;button onclick=&quot;hello()&quot;&gt;Click me!&lt;\/button&gt;\n&lt;script src=&quot;script.js&quot;&gt;&lt;\/script&gt;<\/code><\/pre>\n<p style=\"text-align: justify;\"><a href=\"https:\/\/codesandbox.io\/s\/link-javascript-from-external-file-qwtsds\" target=\"_blank\" rel=\"noopener\">Codesandbox<\/a><\/p>\n<p style=\"text-align: justify;\">In the code above I use the function <code class=\"\" data-line=\"\">hello<\/code> in the <code class=\"\" data-line=\"\">onclick<\/code> event handler for the button <code class=\"\" data-line=\"\">Click me!.<\/code> Also, I link the javascript code with the HTML code with the directive <code class=\"\" data-line=\"\">&lt;script src=&quot;script.js&quot;&gt;&lt;\/script&gt;<\/code><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">As an alternative and usually, for a smaller amount of code, you can use the script tag to embed code between the opening and closing tags <\/span><code class=\"language-javascript\" data-line=\"\">&lt;script&gt; \u2026code &lt;\/script&gt;<\/code><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Let&#8217;s see an example<\/span><\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/index.html\n&lt;script&gt;\n      function hello() {\n        alert(&quot;Hello from embedded javascript code&quot;);\n      }\n&lt;\/script&gt;<\/code><\/pre>\n<p style=\"text-align: justify;\"><a href=\"https:\/\/codesandbox.io\/s\/javascript-code-in-html-file-sbg9uq?file=\/index.html:336-445\" target=\"_blank\" rel=\"noopener\">Codesandbox<\/a><\/p>\n<p style=\"text-align: justify;\">In the code above, I define the function <code class=\"\" data-line=\"\">hello<\/code> inside the <code class=\"\" data-line=\"\">script<\/code> tag and use it as an <code class=\"language-javascript\" data-line=\"\">onclick<\/code>\u00a0event handler for the button <code class=\"\" data-line=\"\">Click me!<\/code><\/p>\n<h5 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Async_vs_Defer\"><\/span><span style=\"font-weight: 400;\">Async vs Defer<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p style=\"text-align: justify;\">If your code in Javascript performs any kind of heavy calculation it will block the parsing of the HTML page until the javascript code completes its execution.<\/p>\n<p style=\"text-align: justify;\">Let&#8217;s see an example on this<\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/script.js\nconst LOOPS = 200;\n\nconst startTime = new Date();\n\nfor (let i = 0; i &lt; LOOPS; i++) {\n  console.log(&quot;Loop:&quot;, i);\n}\n\nconst endTime = new Date();\n\nconst diff = endTime.getMilliseconds() - startTime.getMilliseconds();\n\nconsole.log(`diff: ${diff} ms`);\n\n\/\/debugger;<\/code><\/pre>\n<p style=\"text-align: justify;\"><a href=\"https:\/\/codesandbox.io\/s\/a-lot-of-loops-script-0x90h6?from-embed\" target=\"_blank\" rel=\"noopener\">Codesandbox<\/a><\/p>\n<p style=\"text-align: justify;\">In the code above I use a <code class=\"\" data-line=\"\">for..loop<\/code> to print a message to the console for 200 loops. I also calculate the time that this code gets to execute in milliseconds which is about 2 ms for 200 loops.<\/p>\n<p style=\"text-align: justify;\">In the HTML code, I also render two paragraphs one before the script execution and one after the script is complete. You can see the script blocking effect since the two paragraphs are blinking. The second paragraph becomes visible to the user at about 2 ms. This time period may be slightly different depending on your CPU speed and memory.<\/p>\n<p style=\"text-align: justify;\">Additionally, you can uncomment the <code class=\"\" data-line=\"\">debugger<\/code> statement to see the exact timing of when the script execution completes and that the second paragraph is not rendered yet.<\/p>\n<p style=\"text-align: justify;\">You can experiment with this example and increase the <code class=\"\" data-line=\"\">loops<\/code> constant but be careful because it may break your browser.<\/p>\n<p style=\"text-align: justify;\">We can improve this issue using the attributes <code class=\"\" data-line=\"\">async<\/code> and\u00a0<code class=\"\" data-line=\"\">defer<\/code> in the script tag.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Async\"><\/span>Async<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">The <code class=\"\" data-line=\"\">async<\/code> attribute is a boolean attribute of the src tag and works only on external scripts.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">If it is set the script will download in parallel to parsing the page. The execution of the script will take place as soon as the script is completely downloaded.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">At that point, the parsing of the page is interrupted and the execution of the script is taking place before the parsing of the rest of the page continues<\/span><\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/index.html\n&lt;script src=&quot;script.js&quot; async&gt;&lt;\/script&gt;<\/code><\/pre>\n<p style=\"text-align: justify;\"><a href=\"https:\/\/codesandbox.io\/s\/a-lot-of-loops-script-with-async-dsv3pw?file=\/index.html:369-408\" target=\"_blank\" rel=\"noopener\">Codesandbox<\/a><\/p>\n<p style=\"text-align: justify;\">Similar to the previous example, if you uncomment the\u00a0<code class=\"\" data-line=\"\">debugger<\/code> statement you can see that the HTML code is rendered independently from the execution of the script code. Also, no blinking happens in this case.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Defer\"><\/span>Defer<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">The <code class=\"\" data-line=\"\">defer<\/code> attribute is similar to the <code class=\"\" data-line=\"\">async<\/code> attribute but also has some differences.<\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Like <code class=\"\" data-line=\"\">async<\/code>, the script is downloaded in parallel to the parsing of the page. One difference is that the execution of the script will take place after the page is completely parsed and not when the script has completed the downloading phase. This difference becomes more obvious to the user when the HTML is quite long.<\/span><\/p>\n<p style=\"text-align: justify;\">Let&#8217;s see an example of a page that contains a really big set of DOM elements.<\/p>\n<p style=\"text-align: justify;\">In this Github <a href=\"https:\/\/github.com\/codebitshub\/a-lot-of-dom-elements-with-defer-async\" target=\"_blank\" rel=\"noopener\">repo<\/a>, I prepared an example where you can clone and play with it.<\/p>\n<p style=\"text-align: justify;\">You can see that the code on the <code class=\"\" data-line=\"\">index.html<\/code> page follows the structure below.<\/p>\n<pre><code class=\"language-xml\" data-line=\"\">&lt;head&gt;\n\n...\n\n&lt;script src=&quot;defer.js&quot; defer&gt;&lt;\/script&gt;\n&lt;script src=&quot;async.js&quot; async&gt;&lt;\/script&gt;\n\n....\n\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n...\n\n&lt;!-- 2800 divs with dummy content --&gt;\n\n...\n\n&lt;\/body&gt;<\/code><\/pre>\n<div style=\"text-align: justify;\"><span style=\"letter-spacing: 0.1px;\">Additionally, there are two scripts with async and defer attributes that will grab all the elements with the class content.<\/span><\/div>\n<div><\/div>\n<div style=\"text-align: justify;\"><span style=\"letter-spacing: 0.1px;\">If you load the <code class=\"\" data-line=\"\">index.html<\/code> page in the Chrome browser and open the console in the dev tools you can see that the async script did not grab all of the available div elements that exist on the page whereas the defer grabbed all of them.<\/span><\/div>\n<div><\/div>\n<div style=\"text-align: justify;\"><span style=\"letter-spacing: 0.1px;\">The reason is the different behavior that I already described.<\/span><\/div>\n<div><\/div>\n<div>You can see the logs below<\/div>\n<pre><code class=\"language-javascript\" data-line=\"\">Async: 11751\nasync.js:3 Executed async script\ndefer.js:2 Defer: 28000\ndefer.js:3 Executed defer script<\/code><\/pre>\n<p style=\"text-align: justify;\">One more difference is that <code class=\"\" data-line=\"\">defer<\/code> respects the sequence of scripts whereas <code class=\"\" data-line=\"\">async<\/code> doesn&#8217;t.<\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">&lt;script src=&quot;script1.js&quot; async&gt;&lt;\/script&gt;\n&lt;script src=&quot;script2.js&quot; async&gt;&lt;\/script&gt;\n&lt;script src=&quot;script3.js&quot; async&gt;&lt;\/script&gt;<\/code><\/pre>\n<p style=\"text-align: justify;\">In the code above I use three async scripts. You can see that the sequence of the log messages for the three async scripts is unpredictable.<\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">Executed script 2\nExecuted script 1\nExecuted script 3<\/code><\/pre>\n<p><a href=\"https:\/\/codesandbox.io\/s\/async-with-sequence-scripts-8s954i?file=\/index.html:317-448\" target=\"_blank\" rel=\"noopener\">Codesandbox<\/a><\/p>\n<p style=\"text-align: justify;\">Let&#8217;s see the same example using the <code class=\"\" data-line=\"\">defer<\/code> attribute.<\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">&lt;script src=&quot;script1.js&quot; defer&gt;&lt;\/script&gt;\n&lt;script src=&quot;script2.js&quot; defer&gt;&lt;\/script&gt;\n&lt;script src=&quot;script3.js&quot; defer&gt;&lt;\/script&gt;<\/code><\/pre>\n<p style=\"text-align: justify;\">The logs below show the difference.<\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">Executed script 1 \nExecuted script 2 \nExecuted script 3\n<\/code><\/pre>\n<p><a href=\"https:\/\/codesandbox.io\/s\/defer-with-sequence-cripts-38v2yx?file=\/index.html:318-448\" target=\"_blank\" rel=\"noopener\">Codesandbox<\/a><\/p>\n<h5 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"How_to_call_an_external_javascript_file\"><\/span><span style=\"font-weight: 400;\">How to call an external javascript file<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">You can call an external javascript that belongs to a third-party domain <\/span><span style=\"font-weight: 400;\">file directly in the src. A common use case of this approach is when someone wants to load a library from a CDN.<\/span><\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/index.html\n&lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/lodash@4.17.21\/lodash.min.js&quot; defer&gt;&lt;\/script&gt;\n&lt;script src=&quot;script.js&quot; defer&gt;&lt;\/script&gt;<\/code><\/pre>\n<p style=\"text-align: justify;\">In the code above I use the CDN URL for the Lodash library. You can find all the available CDN URLs <a href=\"https:\/\/www.jsdelivr.com\/package\/npm\/lodash\" target=\"_blank\" rel=\"noopener\">here<\/a>. Also, I use the <code class=\"\" data-line=\"\">defer<\/code> attribute in both script tags to respect the loading order and ensure that the Lodash library is properly loaded when the <code class=\"\" data-line=\"\">script.js<\/code> is executing.<\/p>\n<p><a href=\"https:\/\/codesandbox.io\/s\/load-thrid-party-scrip-lodash-hp7nye?file=\/index.html:495-636\" target=\"_blank\" rel=\"noopener\">Codesandbox<\/a><\/p>\n<h5 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Positioning_javascript_code_inside_HTML_document\"><\/span><span style=\"font-weight: 400;\">Positioning javascript code inside HTML document<br \/>\n<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">If none of the async or defer attributes are present then the position of<br \/>\nthe script tag matters in terms of the execution time and is related to<br \/>\nthe parsing of the page.<\/span><\/p>\n<h5 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"The_script_tag_in_the_head_section\"><\/span><span style=\"font-weight: 400;\">The script tag in the head section<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Everything that is included in the head section of a page is preloaded. So if you include a script tag in the head the Javascript code will run before any parsing of the page takes place.\u00a0<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">As a result of this and depending on the code logic you will have to ensure that every DOM element that the code uses preexists. This is a common scenario that may trigger issues and throw errors. A possible solution is to use <code class=\"\" data-line=\"\">defer<\/code> attribute or the <span style=\"color: #333333;\"><code class=\"\" data-line=\"\">DOMContentLoaded<\/code> content listener as is shown in the example below.<\/span><\/span><\/p>\n<pre><code class=\"language-xml\" data-line=\"\"> &lt;head&gt;\n    &lt;meta charset=&quot;utf-8&quot; \/&gt;\n    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; \/&gt;\n    &lt;title&gt;Page Title&lt;\/title&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; \/&gt;\n    &lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; media=&quot;screen&quot; href=&quot;main.css&quot; \/&gt;\n    &lt;script src=&quot;script1.js&quot;&gt;&lt;\/script&gt;\n    &lt;script src=&quot;script2.js&quot;&gt;&lt;\/script&gt;\n    &lt;script src=&quot;script3.js&quot; defer&gt;&lt;\/script&gt;\n    &lt;script src=&quot;script4.js&quot; async&gt;&lt;\/script&gt;\n  &lt;\/head&gt;<\/code><\/pre>\n<p style=\"text-align: justify;\">In the logs, you can see that for scripts without <code class=\"\" data-line=\"\">defer<\/code> or the <code class=\"\" data-line=\"\">DOMContentLoaded<\/code> event handling the output results are not predictable.<\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">content null\ncontent from defer &lt;div id=&quot;content&quot;&gt;Content&lt;\/div&gt;\ncontent from dom content listener &lt;div id=&quot;content&quot;&gt;Content&lt;\/div&gt;\ncontent from async &lt;div id=&quot;content&quot;&gt;Content&lt;\/div&gt;<\/code><\/pre>\n<p style=\"text-align: justify;\">Regarding the <code class=\"\" data-line=\"\">async<\/code> attribute that really depends on the size of your dom content and the loading time that is required to be fully parsed.<\/p>\n<p><a href=\"https:\/\/codesandbox.io\/s\/script-tags-in-head-section-js3hub?file=\/index.html:34-490\" target=\"_blank\" rel=\"noopener\">Codesandbox<\/a><\/p>\n<h5 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"The_script_tag_in_the_body_section\"><\/span><span style=\"font-weight: 400;\">The script tag in the body section<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">When you place javascript code inside a body it will block the parsing of the page. Next, the code will execute and the parsing of the page will continue when the execution of the code completes. That means that if your code accesses a DOM element that does not exist then an error will be thrown.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">As a best practice, it is advised to place all of your scripts at the bottom of the page to avoid similar errors.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Another way to avoid these errors is to use event listeners that the DOM content is fully loaded. Then you could apply your logic with no errors as I already it is shown in the previous example.<\/span><\/p>\n<h4 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Modules\"><\/span><span style=\"font-weight: 400;\">Modules<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">During the early days of Javascript didn\u2019t support a language-level module syntax. Initially, the scripts were not so complex so that wasn\u2019t really a problem.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Because of the development of more complex scenarios in terms of user interactivity and with the creation of the NodeJS the need for more complex code was increasing too.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">So the community created several ways to structure code into modules and special libraries to load modules that would facilitate the reusability of a code snippet.\u00a0<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Some examples of those ways are<\/span><\/p>\n<ul style=\"text-align: justify;\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">CommonJS (links)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">AMD<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">UMD<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">ES6 modules<\/span><\/li>\n<\/ul>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Modules\" target=\"_blank\" rel=\"noopener\">ES6 modules<\/a> are the latest standard that appeared in 2015 and are now supported by all major browsers and in NodeJS. The rest of the ways that I mentioned are a bit of history and maybe you can find them in older projects.<\/span><\/p>\n<h5 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Importexport\"><\/span><span style=\"font-weight: 400;\">Import\/export<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">A module is just a file that contains Javascript code.<\/span><\/p>\n<p style=\"text-align: justify;\">Modules can use the directives <code class=\"\" data-line=\"\">export<\/code> and <code class=\"\" data-line=\"\">import<\/code> to share functionality between each other.<\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">So for example, if you define two functions in separate files (modules) you can load the second function from the first file. By doing that you can reuse your code among different modules.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Let\u2019s see an example<\/span><\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">&lt;script src=&quot;script.js&quot; type=&quot;module&quot;&gt;&lt;\/script&gt;<\/code><\/pre>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/module.js file\nexport function hello() {\n  console.log(&quot;Hello from module&quot;);\n}\n<\/code><\/pre>\n<p style=\"text-align: justify;\">\u00a0In the code above I use the attribute <code class=\"\" data-line=\"\">type<\/code> with the value <code class=\"\" data-line=\"\">module<\/code>. In the script with the name <code class=\"\" data-line=\"\">script.js<\/code> I import the function <code class=\"\" data-line=\"\">hello<\/code> from the script <code class=\"\" data-line=\"\">module.js<\/code> and then execute it. You can see the output logs below.<\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">Hello from module\n<\/code><\/pre>\n<p><a href=\"https:\/\/codesandbox.io\/s\/modules-eufybw?file=\/module.js:0-64\" target=\"_blank\" rel=\"noopener\">Codesandbox<\/a><\/p>\n<h5 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Characteristics_of_modules\"><\/span><span style=\"font-weight: 400;\">Characteristics of modules<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">In this section, we will see the basic differences between modules and regular scripts. These are core characteristics that apply both for browser and server-side JavaScript code.<\/span><\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Strict_mode\"><\/span><i><span style=\"font-weight: 400;\">Strict mode<\/span><\/i><span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Modules are always executed in <a href=\"http:\/\/codebitshub.com\/this-in-javascript\/#The_strict_mode_in_a_function_invocation\" target=\"_blank\" rel=\"noopener\">strict<\/a> mode.\u00a0 Let\u2019s see an example<\/span><\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">&lt;script src=&quot;script.js&quot; type=&quot;module&quot;&gt;&lt;\/script&gt;<\/code><\/pre>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/module.js\n\nexport function test() {\n  try {\n    \/\/ not using a variable declaration will throw error\n    \/\/ because modules always use strict mode of javascript\n    a = 5;\n  } catch (e) {\n    console.log(&quot;Error:&quot;, e);\n  }\n}\n<\/code><\/pre>\n<p style=\"text-align: justify;\">Below you can see the logs and the error that is thrown<\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">Uncaught ReferenceError: a is not defined<\/code><\/pre>\n<div><a href=\"https:\/\/codesandbox.io\/s\/should-throw-error-lv6k0o?file=\/module.js:0-213\" target=\"_blank\" rel=\"noopener\">Codesandbox<\/a><\/div>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Scope\"><\/span><i><span style=\"font-weight: 400;\">Scope<\/span><\/i><span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Each module defines its own top-level scope. That means that top-level<br \/>\nvariables and functions are not defined in other scripts.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Let\u2019s see an example<\/span><\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/index.html\n&lt;script src=&quot;.\/module1.js&quot; type=&quot;module&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;.\/module2.js&quot; type=&quot;module&quot;&gt;&lt;\/script&gt;<\/code><\/pre>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/module1.js\nconst stats = {\n  views: 1000,\n  clicks: 10\n};\n<\/code><\/pre>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/module2.js\ntry {\n  \/\/stats belongs to module1 scope and should be imported\n  console.log(&quot;statistics&quot;, stats);\n} catch (e) {\n  console.log(&quot;Error:&quot;, e);\n}\n<\/code><\/pre>\n<p style=\"text-align: justify;\"><a href=\"https:\/\/codesandbox.io\/s\/modules-scope-nyoo9z?file=\/module2.js:0-144\" target=\"_blank\" rel=\"noopener\">Codesandbox<\/a><\/p>\n<div style=\"text-align: justify;\">Below you can see the logs and the error that is thrown<\/div>\n<pre><code class=\"language-javascript\" data-line=\"\">ReferenceError: stats is not defined<\/code><\/pre>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">If you want to share variables from another module you will have to export and import those variables.<\/span><\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/index.html\n&lt;script src=&quot;module1.js&quot; type=&quot;module&quot;&gt;&lt;\/script&gt;<\/code><\/pre>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/module1.js\nimport { stats } from &quot;.\/module2.js&quot;;\nconsole.log(&quot;stats&quot;, stats);\n<\/code><\/pre>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/module2.js\nexport const stats = {\n  views: 1000,\n  clicks: 10\n};\n<\/code><\/pre>\n<p style=\"text-align: justify;\">\u00a0You can see the output logs below<\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">stats {views: 1000, clicks: 10}<\/code><\/pre>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Another way to share variables between scripts is using the window object <\/span><span style=\"font-weight: 400;\">in the case of a browser environment and using the global object in the case of a NodeJS environment. Despite the fact that this will work it is considered to be a bad practice.<\/span><\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Module_evaluation\"><\/span><i><span style=\"font-weight: 400;\">Module evaluation<\/span><\/i><span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">A module will be executed only once upon its first import even if it will be imported multiple times. After its execution, all of its exported functions and variables will be available to the rest of the scripts.<\/span><\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/index.html\n&lt;script src=&quot;module1.js&quot; type=&quot;module&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;module2.js&quot; type=&quot;module&quot;&gt;&lt;\/script&gt;<\/code><\/pre>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/module1.js\nimport &quot;.\/logs.js&quot;;<\/code><\/pre>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/module2.js\nimport &quot;.\/logs.js&quot;;<\/code><\/pre>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/module3.js\nexport const stats = {\n  views: 1000,\n  clicks: 10\n};\n<\/code><\/pre>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/logs.js\nimport { stats } from &quot;.\/module3.js&quot;;\n\nconsole.log(&quot;stats: &quot;, stats);\n<\/code><\/pre>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">You can see in the output logs below that the message is printed only once, despite the fact that it is imported both in scripts<code class=\"\" data-line=\"\"> module1.js<\/code> and <code class=\"\" data-line=\"\">module2.js<\/code><\/span><\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">stats: {views: 1000, clicks: 10}<\/code><\/pre>\n<div><\/div>\n<div><a href=\"https:\/\/codesandbox.io\/s\/modules-evaluation-tf628j?file=\/index.html:497-596\" target=\"_blank\" rel=\"noopener\">Codesandbox<\/a><\/div>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"importmeta\"><\/span><i><span style=\"font-weight: 400;\">import.meta<\/span><\/i><span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">You can retrieve information about the current module using the <code class=\"\" data-line=\"\">import.meta<\/code><br \/>\nproperty.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Its content depends on the environment.<\/span><\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/index.html\n&lt;script src=&quot;module.js&quot; type=&quot;module&quot;&gt;&lt;\/script&gt;<\/code><\/pre>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/module.js\nconsole.log(&quot;url: &quot;, import.meta.url);\n<\/code><\/pre>\n<div style=\"text-align: justify;\">You can see the output logs below<\/div>\n<div>\n<pre><code class=\"language-javascript\" data-line=\"\">url: https:\/\/yi26l5.csb.app\/module.js<\/code><\/pre>\n<\/div>\n<div><a href=\"https:\/\/codesandbox.io\/s\/import-meta-yi26l5?file=\/module.js:0-39\" target=\"_blank\" rel=\"noopener\">Codesandbox<\/a><\/div>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"The_%E2%80%98this_keyword\"><\/span><i><span style=\"font-weight: 400;\">The \u2018this\u2019 keyword<\/span><\/i><span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">The <code class=\"\" data-line=\"\">this<\/code> keyword in the top-level scope of a module is undefined while compared to a non-module script is a global object.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Let\u2019s see an example<\/span><\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/index.html\n &lt;script src=&quot;.\/module.js&quot; type=&quot;module&quot;&gt;&lt;\/script&gt;<\/code><\/pre>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/module.js\ntry {\n  console.log(&quot;this&quot;, this);\n} catch (e) {\n  console.log(&quot;Error:&quot;, e);\n}\n<\/code><\/pre>\n<p style=\"text-align: justify;\">You can see the output logs below<\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">this undefined<\/code><\/pre>\n<p><a href=\"https:\/\/codesandbox.io\/s\/this-in-modules-0vuxxn?file=\/module.js:0-79\" target=\"_blank\" rel=\"noopener\">Codesandbox<\/a><\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Modules_are_deferred\"><\/span><i><span style=\"font-weight: 400;\">Modules are deferred<\/span><\/i><span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Modules are always <a href=\"#Defer\">deferred<\/a> in a browser environment. That means that the execution of the script will take place after the parsing of the page is complete and not when the script has completed the downloading phase.<br \/>\n<\/span><\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Async_with_modules\"><\/span><i><span style=\"font-weight: 400;\">Async with modules<\/span><\/i><span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">As I mentioned already for regular scripts the async attribute works only on external scripts whereas module scripts work on inline scripts too. That\u2019s good for functionality that doesn\u2019t depend on other parts of code, like ads or event listeners on DOM elements.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Let\u2019s see an example<\/span><\/p>\n<pre><code class=\"language-javascript\" data-line=\"\"> &lt;script async type=&quot;module&quot;&gt;\n    import { stats } from &quot;.\/module.js&quot;;\n    console.log(&quot;stats:&quot;, stats);\n  &lt;\/script&gt;<\/code><\/pre>\n<p style=\"text-align: justify;\">You can see the output logs below<\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">stats: {views: 100, clicks: 10}<\/code><\/pre>\n<p><a href=\"https:\/\/codesandbox.io\/s\/async-modules-lzrpy4?file=\/index.html\" target=\"_blank\" rel=\"noopener\">Codesandbox<\/a><\/p>\n<h5 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"External_scripts\"><\/span><span style=\"font-weight: 400;\">External scripts<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">There are two major differences for scripts that have type=&#8221;module&#8221;.<\/span><\/p>\n<ol style=\"text-align: justify;\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">External scripts with the same src run only once<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">When you fetch scripts from a different origin you will have to be aware of CORS issues. In order to resolve this, you will have to provide an \u201cAccess-Control-Allow-Origin\u201d in the server that will allow the fetch.<\/span><\/li>\n<\/ol>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/index.html\n&lt;script src=&quot;.\/module.js&quot; type=&quot;module&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;.\/module.js&quot; type=&quot;module&quot;&gt;&lt;\/script&gt;<\/code><\/pre>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/module.js\nconsole.log(&quot;Hello&quot;);\n<\/code><\/pre>\n<p>You can see the logs below<\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">Hello<\/code><\/pre>\n<p><a href=\"https:\/\/codesandbox.io\/s\/modules-with-same-src-u710fu?file=\/index.html:494-597\" target=\"_blank\" rel=\"noopener\">Codesandbox<\/a><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">External scripts that are fetched from another origin (e.g. another site) require CORS headers, as described in the chapter Fetch: Cross-Origin Requests. In other words, if a module script is fetched from another origin, the remote server must supply a header Access-Control-Allow-Origin allowing the fetch.<\/span><\/p>\n<h5 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Bare_modules\"><\/span><span style=\"font-weight: 400;\">Bare modules<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">The URL that you use with the import directive must be either relative or absolute. The modules that do not use any path are called <code class=\"\" data-line=\"\">bare<\/code> modules and are not allowed to be used with import in browser environments.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">In several environments and bundlers (like NodeJS or Webpack) bare modules are allowed but they use their own path resolving algorithm for importing modules.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">For instance, this import is invalid: <\/span><\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/index.html\n&lt;script src=&quot;module.js&quot; type=&quot;module&quot;&gt;&lt;\/script&gt;<\/code><\/pre>\n<pre><code class=\"language-javascript\" data-line=\"\">import { hello } from &quot;hello&quot;;\n<\/code><\/pre>\n<p>Output<\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">Uncaught TypeError: Failed to resolve module specifier &quot;hello&quot;. Relative references must start with either &quot;\/&quot;, &quot;.\/&quot;, or &quot;..\/&quot;.\n<\/code><\/pre>\n<p><a href=\"https:\/\/codesandbox.io\/s\/invalid-use-bare-modules-2tyxp7\" target=\"_blank\" rel=\"noopener\">Codesandbox<\/a><\/p>\n<h5 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"%E2%80%9Cnomodule%E2%80%9D_attribute\"><\/span><span style=\"font-weight: 400;\">&#8220;nomodule&#8221; attribute<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Older versions of browsers do not support the module value for the type attribute. In such a case the module scripts are ignored and you can provide a fallback with the use of <code class=\"\" data-line=\"\">nomodule<\/code> attribute.<\/span><\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/ index.html \n&lt;script src=&quot;module.js&quot; type=&quot;module&quot;&gt;&lt;\/script&gt;\n&lt;script nomodule&gt;\n    console.log(&quot;Type=mdule and nomodule will work in modernbrowsers&quot;);\n    console.log(\n      &quot;Older browsers wiill ignore unknown type=module and will execute only scripts with type nomodule&quot;\n    );\n&lt;\/script&gt;<\/code><\/pre>\n<p><a href=\"https:\/\/codesandbox.io\/s\/no-module-script-j7t630\" target=\"_blank\" rel=\"noopener\">Codesandbox<\/a><\/p>\n<h5 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Build_tools\"><\/span><span style=\"font-weight: 400;\">Build tools<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">During the development of a web application, it is not so common to use modules directly in a browser. Usually, the developers are using bundlers like Webpack or Parcel in order to bundle all the modules together to a single build script and deploy them to the production server.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Below is a shortlist of the advantages of using bundlers are<\/span><\/p>\n<ul style=\"text-align: justify;\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">minify the code<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">remove any debugger and console directives<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">remove any unreachable code<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">allow bare modules<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">apply polyfills to provide compatibility with older browsers<br \/>\nversions<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">tree-shaking<\/span><\/li>\n<\/ul>\n<h5 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Dynamic_modules_loading\"><\/span><span style=\"font-weight: 400;\">Dynamic modules loading<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">You can use dynamic modules loading when you want to increase the loading of your code or when you want to load code under certain conditions. This can be done using the function-like expression <b>import()<span style=\"font-weight: 400;\">. This expression will return a <a href=\"http:\/\/codebitshub.com\/javascript-await-async\/#Promises\" target=\"_blank\" rel=\"noopener\">Promise<\/a> and you can call it from any place in the code<\/span><\/b><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Let\u2019s see an example<\/span><\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/index.html\n &lt;script src=&quot;module1.js&quot; type=&quot;module&quot;&gt;&lt;\/script&gt;<\/code><\/pre>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/module1.js\nconst greet = async () =&gt; {\n  const { name } = await import(&quot;.\/module2.js&quot;);\n  return `Hello ${name}`;\n};\n\ngreet().then((greeting) =&gt; {\n  console.log(greeting);\n});\n<\/code><\/pre>\n<pre><code class=\"language-javascript\" data-line=\"\">\/\/module2.js\nexport const name = &quot;John&quot;;\n<\/code><\/pre>\n<p>Output logs<\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">Hello John<\/code><\/pre>\n<p><a href=\"https:\/\/codesandbox.io\/s\/dynamic-imports-modules-dsvt0m?file=\/module2.js:0-28\" target=\"_blank\" rel=\"noopener\">Codesandbox<\/a><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">The dynamic modules loading can be useful in the following indicative scenarios<\/span><\/p>\n<ul style=\"text-align: justify;\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">code-splitting<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">lazy loading component<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">adding error boundaries components in react<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">decrease the size of your final bundle script<\/span><\/li>\n<\/ul>\n<h4 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Summary\"><\/span><span style=\"font-weight: 400;\">Summary<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">In this article, we saw every possible way to link Javascript in HTML and other environments like NodeJS.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">More specifically you can link Javascript code <span style=\"font-weight: 400;\">using the <strong>script<\/strong> tag <\/span> <\/span><\/p>\n<ul style=\"text-align: justify;\">\n<li><span style=\"font-weight: 400;\">in <strong>any<\/strong> place of an HTML document<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">with the attributes <strong>async\/defer<\/strong><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">with the type \u201c<strong>module<\/strong>\u201d<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">and <strong>external scripts<\/strong> with the <strong>src<\/strong> attribute<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">to load code from any local files with the <strong>src<\/strong> attribute<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">with the <strong>import\/export<\/strong> directives and with ES6 modules<\/span><\/li>\n<\/ul>\n<p style=\"text-align: justify;\">Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As a front-end developer, you will have to master three basic skills. These are HTML, CSS, and Javascript. The HTML will be used to structure the\u00a0 DOM tree of a page, the CSS is used for styling and the Javascript language for interactivity with a web page. In this article, we are going to see [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":24,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"nf_dc_page":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[11],"tags":[18,17],"post_folder":[],"class_list":["post-572","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming-languages","tag-html","tag-javascript","post-list-post__standard"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>If You Read One Article About How To Link Javascript in HTML Read this One - codebitshub.com<\/title>\n<meta name=\"description\" content=\"codebitshub.com If You Read One Article About How To Link Javascript in HTML Read this One Programming Languages\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codebitshub.com\/link-javascript-in-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"If You Read One Article About How To Link Javascript in HTML Read this One - codebitshub.com\" \/>\n<meta property=\"og:description\" content=\"codebitshub.com If You Read One Article About How To Link Javascript in HTML Read this One Programming Languages\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codebitshub.com\/link-javascript-in-html\/\" \/>\n<meta property=\"og:site_name\" content=\"codebitshub.com\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-26T11:51:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-28T09:08:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1125\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"myapos\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"myapos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/link-javascript-in-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/link-javascript-in-html\\\/\"},\"author\":{\"name\":\"myapos\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#\\\/schema\\\/person\\\/8f2b53c479aa7e7bb9a24a50b9b51e61\"},\"headline\":\"If You Read One Article About How To Link Javascript in HTML Read this One\",\"datePublished\":\"2022-02-26T11:51:52+00:00\",\"dateModified\":\"2022-02-28T09:08:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/link-javascript-in-html\\\/\"},\"wordCount\":2309,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/link-javascript-in-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"keywords\":[\"html\",\"javascript\"],\"articleSection\":[\"Programming Languages\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/codebitshub.com\\\/link-javascript-in-html\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/link-javascript-in-html\\\/\",\"url\":\"https:\\\/\\\/codebitshub.com\\\/link-javascript-in-html\\\/\",\"name\":\"If You Read One Article About How To Link Javascript in HTML Read this One - codebitshub.com\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/link-javascript-in-html\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/link-javascript-in-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"datePublished\":\"2022-02-26T11:51:52+00:00\",\"dateModified\":\"2022-02-28T09:08:07+00:00\",\"description\":\"codebitshub.com If You Read One Article About How To Link Javascript in HTML Read this One Programming Languages\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/link-javascript-in-html\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codebitshub.com\\\/link-javascript-in-html\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/link-javascript-in-html\\\/#primaryimage\",\"url\":\"https:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"contentUrl\":\"https:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"width\":1920,\"height\":1125,\"caption\":\"codebitshub.com\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/link-javascript-in-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/codebitshub.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"If You Read One Article About How To Link Javascript in HTML Read this One\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#website\",\"url\":\"https:\\\/\\\/codebitshub.com\\\/\",\"name\":\"codebitshub.com\",\"description\":\"A blog about programming and coding\",\"publisher\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codebitshub.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#organization\",\"name\":\"codebitshub.com\",\"url\":\"https:\\\/\\\/codebitshub.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"http:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"contentUrl\":\"http:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"width\":1920,\"height\":1125,\"caption\":\"codebitshub.com\"},\"image\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#\\\/schema\\\/person\\\/8f2b53c479aa7e7bb9a24a50b9b51e61\",\"name\":\"myapos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g\",\"caption\":\"myapos\"},\"url\":\"https:\\\/\\\/codebitshub.com\\\/author\\\/myapos\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"If You Read One Article About How To Link Javascript in HTML Read this One - codebitshub.com","description":"codebitshub.com If You Read One Article About How To Link Javascript in HTML Read this One Programming Languages","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codebitshub.com\/link-javascript-in-html\/","og_locale":"en_US","og_type":"article","og_title":"If You Read One Article About How To Link Javascript in HTML Read this One - codebitshub.com","og_description":"codebitshub.com If You Read One Article About How To Link Javascript in HTML Read this One Programming Languages","og_url":"https:\/\/codebitshub.com\/link-javascript-in-html\/","og_site_name":"codebitshub.com","article_published_time":"2022-02-26T11:51:52+00:00","article_modified_time":"2022-02-28T09:08:07+00:00","og_image":[{"width":1920,"height":1125,"url":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","type":"image\/jpeg"}],"author":"myapos","twitter_card":"summary_large_image","twitter_misc":{"Written by":"myapos","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codebitshub.com\/link-javascript-in-html\/#article","isPartOf":{"@id":"https:\/\/codebitshub.com\/link-javascript-in-html\/"},"author":{"name":"myapos","@id":"https:\/\/codebitshub.com\/#\/schema\/person\/8f2b53c479aa7e7bb9a24a50b9b51e61"},"headline":"If You Read One Article About How To Link Javascript in HTML Read this One","datePublished":"2022-02-26T11:51:52+00:00","dateModified":"2022-02-28T09:08:07+00:00","mainEntityOfPage":{"@id":"https:\/\/codebitshub.com\/link-javascript-in-html\/"},"wordCount":2309,"commentCount":0,"publisher":{"@id":"https:\/\/codebitshub.com\/#organization"},"image":{"@id":"https:\/\/codebitshub.com\/link-javascript-in-html\/#primaryimage"},"thumbnailUrl":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","keywords":["html","javascript"],"articleSection":["Programming Languages"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codebitshub.com\/link-javascript-in-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codebitshub.com\/link-javascript-in-html\/","url":"https:\/\/codebitshub.com\/link-javascript-in-html\/","name":"If You Read One Article About How To Link Javascript in HTML Read this One - codebitshub.com","isPartOf":{"@id":"https:\/\/codebitshub.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codebitshub.com\/link-javascript-in-html\/#primaryimage"},"image":{"@id":"https:\/\/codebitshub.com\/link-javascript-in-html\/#primaryimage"},"thumbnailUrl":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","datePublished":"2022-02-26T11:51:52+00:00","dateModified":"2022-02-28T09:08:07+00:00","description":"codebitshub.com If You Read One Article About How To Link Javascript in HTML Read this One Programming Languages","breadcrumb":{"@id":"https:\/\/codebitshub.com\/link-javascript-in-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codebitshub.com\/link-javascript-in-html\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codebitshub.com\/link-javascript-in-html\/#primaryimage","url":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","contentUrl":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","width":1920,"height":1125,"caption":"codebitshub.com"},{"@type":"BreadcrumbList","@id":"https:\/\/codebitshub.com\/link-javascript-in-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codebitshub.com\/"},{"@type":"ListItem","position":2,"name":"If You Read One Article About How To Link Javascript in HTML Read this One"}]},{"@type":"WebSite","@id":"https:\/\/codebitshub.com\/#website","url":"https:\/\/codebitshub.com\/","name":"codebitshub.com","description":"A blog about programming and coding","publisher":{"@id":"https:\/\/codebitshub.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codebitshub.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codebitshub.com\/#organization","name":"codebitshub.com","url":"https:\/\/codebitshub.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codebitshub.com\/#\/schema\/logo\/image\/","url":"http:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","contentUrl":"http:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","width":1920,"height":1125,"caption":"codebitshub.com"},"image":{"@id":"https:\/\/codebitshub.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/codebitshub.com\/#\/schema\/person\/8f2b53c479aa7e7bb9a24a50b9b51e61","name":"myapos","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g","caption":"myapos"},"url":"https:\/\/codebitshub.com\/author\/myapos\/"}]}},"_links":{"self":[{"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/posts\/572","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/comments?post=572"}],"version-history":[{"count":5,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/posts\/572\/revisions"}],"predecessor-version":[{"id":718,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/posts\/572\/revisions\/718"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/media\/24"}],"wp:attachment":[{"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/media?parent=572"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/categories?post=572"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/tags?post=572"},{"taxonomy":"post_folder","embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/post_folder?post=572"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}