{"id":2192,"date":"2022-04-12T16:00:40","date_gmt":"2022-04-12T16:00:40","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=2192"},"modified":"2022-04-12T16:00:40","modified_gmt":"2022-04-12T16:00:40","slug":"external-javascript-file","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/04\/12\/external-javascript-file\/","title":{"rendered":"External JavaScript file"},"content":{"rendered":"\n

We can create external JavaScript file and embed it in many html page.<\/p>\n\n\n\n

It provides code re usability<\/strong> because single JavaScript file can be used in several html pages.<\/p>\n\n\n\n

An external JavaScript file must be saved by .js extension. It is recommended to embed all JavaScript files into a single file. It increases the speed of the webpage.<\/p>\n\n\n\n

Let’s create an external JavaScript<\/a> file that prints Hello Javatpoint in a alert dialog box.<\/p>\n\n\n\n

message.js<\/strong><\/a><\/a><\/a><\/p>\n\n\n\n

  1. function msg(){  <\/li>
  2.  alert(“Hello Javatpoint”);  <\/li>
  3. }  <\/li><\/ol>\n\n\n\n

    Let’s include the JavaScript file into html<\/a> page. It calls the JavaScript function<\/a> on button click.<\/p>\n\n\n\n

    index.html<\/strong><\/a><\/a><\/a><\/p>\n\n\n\n

    1. <<\/strong>html<\/strong>><\/strong>  <\/li>
    2. <<\/strong>head<\/strong>><\/strong>  <\/li>
    3. <<\/strong>script<\/strong> type=”text\/javascript” src=”message.js”><\/strong><\/<\/strong>script<\/strong>><\/strong>  <\/li>
    4. <\/<\/strong>head<\/strong>><\/strong>  <\/li>
    5. <<\/strong>body<\/strong>><\/strong>  <\/li>
    6. <<\/strong>p<\/strong>><\/strong>Welcome to JavaScript<\/<\/strong>p<\/strong>><\/strong>  <\/li>
    7. <<\/strong>form<\/strong>><\/strong>  <\/li>
    8. <<\/strong>input<\/strong> type=”button” value=”click” onclick=”msg()”\/><\/strong>  <\/li>
    9. <\/<\/strong>form<\/strong>><\/strong>  <\/li>
    10. <\/<\/strong>body<\/strong>><\/strong>  <\/li>
    11. <\/<\/strong>html<\/strong>><\/strong>  <\/li><\/ol>\n\n\n\n

      Advantages of External JavaScript<\/h2>\n\n\n\n

      There will be following benefits if a user creates an external javascript:<\/p>\n\n\n\n

      1. It helps in the reusability of code in more than one HTML file.<\/li>
      2. It allows easy code readability.<\/li>
      3. It is time-efficient as web browsers cache the external js files, which further reduces the page loading time.<\/li>
      4. It enables both web designers and coders to work with html and js files parallelly and separately, i.e., without facing any code conflictions.<\/li>
      5. The length of the code reduces as only we need to specify the location of the js file.<\/li><\/ol>\n\n\n\n

        Disadvantages of External JavaScript<\/h2>\n\n\n\n

        There are the following disadvantages of external files:<\/p>\n\n\n\n

        1. The stealer may download the coder’s code using the url of the js file.<\/li>
        2. If two js files are dependent on one another, then a failure in one file may affect the execution of the other dependent file.<\/li>
        3. The web browser needs to make an additional http request to get the js code.<\/li>
        4. A tiny to a large change in the js code may cause unexpected results in all its dependent files.<\/li>
        5. We need to check each file that depends on the commonly created external javascript file.<\/li>
        6. If it is a few lines of code, then better to implement the internal javascript code.<\/li><\/ol>\n","protected":false},"excerpt":{"rendered":"

          We can create external JavaScript file and embed it in many html page. It provides code re usability because single JavaScript file can be used in several html pages. An external JavaScript file must be saved by .js extension. It is recommended to embed all JavaScript files into a single file. It increases the speed of the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[429],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2192"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=2192"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2192\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=2192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=2192"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=2192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}