{"id":78932,"date":"2020-07-04T09:00:34","date_gmt":"2020-07-04T03:30:34","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=78932"},"modified":"2024-07-24T17:03:56","modified_gmt":"2024-07-24T11:33:56","slug":"html-javascript","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/html-javascript\/","title":{"rendered":"HTML JavaScript – Add Javascript File to HTML"},"content":{"rendered":"

HTML documents can be made interactive and dynamic using a script. A script is a piece of code that adds dynamism to a website. The popular scripting languages are VBScript, JavaScript, Python, etc. Nowadays, JavaScript, along with its frameworks, are prevailing and used for web development. The JavaScript file can be stored with \u2018.js\u2019 extension and can be accessed using the <script> tag of HTML.<\/p>\n

\"HTML<\/a><\/p>\n

Advantages of JavaScript in HTML<\/h2>\n

1. Client-side Language – JavaScript is a client-side language, i.e. it is executed on the processor of the user, thus reducing the load on the web-server and bandwidth.<\/p>\n

2. Easy to Learn – We can easily learn JavaScript because of its syntax closer to the English language and a large number of predefined functionalities.<\/p>\n

3. Faster Execution – JavaScript provides faster execution since it executes on the client-side and does not consume any server bandwidth.<\/p>\n

4. Compiler-free – JavaScript does not need any explicit compiler, as it is interpreted as the HTML tags.<\/p>\n

5. Test and Debug – It is easy to test and debug the JavaScript code.<\/p>\n

6. Platform – JavaScript is a platform-independent scripting language.<\/p>\n

7. Event-based – JavaScript provides event-based programming, i.e.;certain methods are executed when a particular event occurs.<\/p>\n

8. Procedural Programming – Procedural programming capabilities such as condition-checking, looping, branching, etc. can be easily executed using JavaScript.<\/p>\n

9. <\/strong>Prevailing Frameworks – JavaScript has become extremely popular with the advent of Node.js, being used as the back-end.<\/p>\n

Moreover, JavaScript supports functional programming styles, making it versatile for different programming paradigms. This flexibility makes development easier while at the same time enabling the developers to write good and maintainable code. Additionally, with the integration of modern ES6+ features like arrow functions, promises, and async\/await, JavaScript has become more powerful and efficient, enhancing the overall developer experience.<\/p>\n

With the help of JavaScript, numerous libraries and frameworks have been developed, which are React, Angular, and Vue. js. These tools help reduce the development time and make it quite easy to develop complex and high performing applications. Due to this extensive support and community backing, JavaScript cannot be overlooked as a key requisite for current web development.<\/p>\n

HTML <script> tag<\/h2>\n

The script tag of an HTML document contains the client-side script, used to perform tasks on that particular document. It contains either the code written implicitly or an external file, specified in the \u2018src\u2019 attribute with an extension \u2018.js\u2019.<\/p>\n

External JavaScript<\/h3>\n

Code-<\/strong><\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>External Script<\/title>\r\n<script src = \"script.js\" type = \"text\/javascript\"\/><\/script>\r\n<\/head>\r\n<body>\r\n<input type = \"button\" onclick = \"myFunction();\" name = \"okay\" value = \"Click\"> <\/input>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Script.js –<\/strong><\/p>\n
function myFunction() {\r\n  alert(\"Hello, World\");\r\n}<\/pre>\n
Output-<\/strong><\/p>\n
\"external<\/a><\/p>\n
Internal JavaScript<\/h3>\n
Code-<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>External Script<\/title>\r\n<script>\r\n  function myFunction() {\r\n   alert(\"Hello, World\");\r\n}\r\n<\/script>\r\n<\/head>\r\n<body>\r\n<input type = \"button\" onclick = \"myFunction();\" name = \"okay\" value = \"Click\"> <\/input>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"internal<\/a><\/p>\n
The script tag can be placed anywhere within the document, but usually, it is kept in the <head> tag.<\/p>\n
HTML JavaScript Event Handlers<\/h2>\n
As seen from the name, event handlers are functions called after occurrence of a particular event. This event may be a button on-click, mouse hovering, keyboard-related event, etc.<\/p>\n
Code-<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n   <head>\r\n      <script type = \"text\/JavaScript\">\r\n         function EventHandler() {\r\n            alert(\"Welcome to DataFlair\");\r\n         }\r\n      <\/script>\r\n   <\/head>\r\n   <body>\r\n   <p onmouseover = \"EventHandler();\">Roll the mouse here<\/p>\r\n   <\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
HTML Events with JavaScript<\/h2>\n
JavaScript<\/a> is for handling certain events. Its syntax is <element event=\u201dJavaScript\u201d>. The events can be of the following types-<\/p>\n
Common HTML Events<\/h3>\n\n\n\n\n\n\n\n\n\n
Event<\/b><\/td>\nDescription<\/b><\/td>\n<\/tr>\n
onchange<\/span><\/td>\nOccurs when there is a change in an HTML element.<\/span><\/td>\n<\/tr>\n
onclick<\/span><\/td>\nOccurs when the user clicks an HTML element.<\/span><\/td>\n<\/tr>\n
onmouseover<\/span><\/td>\nThis occurs when the mouse moves over an HTML element.<\/span><\/td>\n<\/tr>\n
onmouseout<\/span><\/td>\nOccurs when the mouse moves away from the HTML element.<\/span><\/td>\n<\/tr>\n
onkeydown<\/span><\/td>\nOccurs when we press a key.<\/span><\/td>\n<\/tr>\n
onload<\/span><\/td>\nIt occurs when the page is loaded by the browser.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
getElementByID() method (Change HTML content)-<\/strong><\/p>\n
In order to select an element in HTML document and perform dynamic tasks on it, the getElementByID() method is useful.
\nCode-<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<body>\r\n<h1>JavaScript<\/h1>\r\n<p>JavaScript to change the content of an HTML element:<\/p>\r\n<button type=\"button\" onclick=\"myFunction()\">Click<\/button>\r\n<p id=\"demo\">Initially<\/p>\r\n<script>\r\nfunction myFunction() { \r\n  document.getElementById(\"demo\").innerHTML = \"Hello World!\";\r\n}\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
Output-<\/strong>
\nBefore-<\/p>\n
\"<\/a><\/p>\n
After-<\/p>\n
\"getElementByID()\"<\/a><\/p>\n
Changing Style in JavaScript<\/h2>\n
Code-<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<body>\r\n<h1>JavaScript<\/h1>\r\n<p>JavaScript to change the content of an HTML element:<\/p>\r\n<button type=\"button\" onclick=\"myFunction()\">Click<\/button>\r\n<p id=\"demo\">DataFlair<\/p>\r\n<script>\r\nfunction myFunction() {\r\n  document.getElementById(\"demo\").style.fontSize = \"25px\"; \r\n  document.getElementById(\"demo\").style.color = \"white\";\r\n  document.getElementById(\"demo\").style.backgroundColor = \"blue\";        \r\n}\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong>
\nBefore-<\/p>\n
\"before<\/a><\/p>\n
After-<\/p>\n
\"after<\/a><\/p>\n
HTML JavaScript Image Attributes (Change HTML Attribute)<\/h2>\n
Code-<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<body>\r\n<script>\r\nfunction myFun(sw) {\r\n  var pic;\r\n  if (sw == 1) {\r\n    pict = \"images\/river.jpg\"\r\n  } else {\r\n    pict = \"images\/mountain.jpg\"\r\n  }\r\n  document.getElementById('myImage').src = pict;\r\n}\r\n<\/script>\r\n\r\n<img id=\"myImage\" src=\"images\/landscape.jpg\" width=\"100\" height=\"180\">\r\n\r\n<p>\r\n<button type=\"button\" onclick=\"myFun(1)\">River<\/button>\r\n<button type=\"button\" onclick=\"myFun(0)\">Mountain<\/button>\r\n<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong>
\nBefore-<\/p>\n
\"before<\/a><\/p>\n
After Clicking River-<\/p>\n
\"after,image<\/a>
\nAfter Clicking Mountain-<\/p>\n
\",after,image<\/a><\/p>\n
JavaScript <noscript> tag<\/h2>\n
Some browsers do not support client-side scripts, or client-side scripts have been disabled in them. For such browsers, the <noscript> tag is useful to display alternate text.
\nFor example,<\/strong><\/p>\n
<html>\r\n<body>\r\n<h1>JavaScript<\/h1>\r\n<p>JavaScript to change the content of an HTML element:<\/p>\r\n<button type=\"button\" onclick=\"myFunction()\">Click<\/button>\r\n<p id=\"demo\">Initially<\/p>\r\n<script>\r\nfunction myFunction() { \r\n  document.getElementById(\"demo\").innerHTML = \"Hello World!\";\r\n}\r\n<\/script>\r\n<noscript>\r\nYour browser does not support JavaScript\r\n<\/noscript>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Default Scripting Language<\/h2>\n
An HTML document may comprise multiple scripts, thus multiple files. HTML5 allows developers to write the script language only once, for these multiple scripts in the <meta> tag . For example,<\/p>\n
<head>\r\n<meta http-equiv = \"Content-Script-Type\" content = \"text\/JavaScript\">\r\n<\/head>\r\n<\/pre>\n
Summary<\/h2>\n
In order to make web-pages interactive and dynamic, we need a scripting language. In this article, we\u2019ve discussed the most popular scripting language, JavaScript. JavaScript is useful for manipulation of images, event-handling, validation of forms, etc. We\u2019ve looked at the advantages of HTML JavaScript, the <script> tag, how to access elements using JavaScript, and a basic taste of JavaScript. We\u2019ve also looked at the event handlers in JavaScript and the <noscript> tag.
HTML documents can be made interactive and dynamic using a script. A script is a piece of code that adds dynamism to a website. The popular scripting languages are VBScript, JavaScript, Python, etc. Nowadays,...<\/p>\n","protected":false},"author":10,"featured_media":78979,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22400],"tags":[22505,22506,22504],"class_list":["post-78932","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-add-javascript-file-to-html","tag-html-and-javascript","tag-html-javascript"],"yoast_head":"\nHTML JavaScript - Add Javascript File to HTML - DataFlair<\/title>\n<meta name=\"description\" content=\"Learn HTML and javascript, their uses & importance, html javascript function, javascript tags list, why add javascript file to html, HTML Events with JavaScript etc\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/html-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML JavaScript - Add Javascript File to HTML - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Learn HTML and javascript, their uses & importance, html javascript function, javascript tags list, why add javascript file to html, HTML Events with JavaScript etc\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/html-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-04T03:30:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-24T11:33:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-JavaScript-df.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML JavaScript - Add Javascript File to HTML - DataFlair","description":"Learn HTML and javascript, their uses & importance, html javascript function, javascript tags list, why add javascript file to html, HTML Events with JavaScript etc","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:\/\/data-flair.training\/blogs\/html-javascript\/","og_locale":"en_US","og_type":"article","og_title":"HTML JavaScript - Add Javascript File to HTML - DataFlair","og_description":"Learn HTML and javascript, their uses & importance, html javascript function, javascript tags list, why add javascript file to html, HTML Events with JavaScript etc","og_url":"https:\/\/data-flair.training\/blogs\/html-javascript\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2020-07-04T03:30:34+00:00","article_modified_time":"2024-07-24T11:33:56+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-JavaScript-df.jpg","type":"image\/jpeg"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/html-javascript\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/html-javascript\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/a90b082e16aa38d207212d22b0581f33"},"headline":"HTML JavaScript – Add Javascript File to HTML","datePublished":"2020-07-04T03:30:34+00:00","dateModified":"2024-07-24T11:33:56+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/html-javascript\/"},"wordCount":769,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/html-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-JavaScript-df.jpg","keywords":["add javascript file to html","html and javascript","HTML JavaScript"],"articleSection":["HTML Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/html-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/html-javascript\/","url":"https:\/\/data-flair.training\/blogs\/html-javascript\/","name":"HTML JavaScript - Add Javascript File to HTML - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/html-javascript\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/html-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-JavaScript-df.jpg","datePublished":"2020-07-04T03:30:34+00:00","dateModified":"2024-07-24T11:33:56+00:00","description":"Learn HTML and javascript, their uses & importance, html javascript function, javascript tags list, why add javascript file to html, HTML Events with JavaScript etc","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/html-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/html-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/html-javascript\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-JavaScript-df.jpg","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-JavaScript-df.jpg","width":1200,"height":628,"caption":"HTML JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/html-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"HTML Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/html\/"},{"@type":"ListItem","position":3,"name":"HTML JavaScript – Add Javascript File to HTML"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/a90b082e16aa38d207212d22b0581f33","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"The DataFlair Team is passionate about delivering top-notch tutorials and resources on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. With expertise in the tech industry, we simplify complex topics to help learners excel. Stay updated with our latest insights.","url":"https:\/\/data-flair.training\/blogs\/author\/dfadteam1\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/78932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=78932"}],"version-history":[{"count":5,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/78932\/revisions"}],"predecessor-version":[{"id":142897,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/78932\/revisions\/142897"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/78979"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=78932"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=78932"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=78932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}