Understanding External, Internal, and Inline JavaScript for Web Development
Introduction:
JavaScript is a vital part of modern web development, allowing developers to create dynamic and interactive web pages. There are several ways to include JavaScript in your website, including external, internal, and inline Javascript. In this article, we'll explore what these three types of JavaScript are and how they differ from each other.
JavaScript is applied to HTML pages in a similar manner like to CSS. Here we are going to learn how to add external, internal and inline javascript code in HTML
Internal JavaScript
It refers to JavaScript code that is included directly within an HTML document, rather than in a separate external file. The JavaScript code is written within a "script" tag in the HTML document and is executed by the browser when the document is loaded.
Internal JavaScript code is directly written within an HTML document using the script tag. JavaScript code must be inserted between <script> and </script> tags and is executed as soon as the browser encounters it while parsing the HTML document.
This approach has the advantage of being easy to implement, but it also has several drawbacks, including:
- Code Duplication: Since the JavaScript code is included directly in the HTML document, it cannot be reused across multiple web pages.
- Slower Load Time: Since the JavaScript code is included directly in the HTML document, it can slow down the page load time.
To include internal JavaScript, you need to add the following code to your HTML document.
Following are the different methods to include Internal JavaScript code in HTML.
JavaScript code in <head>…</head> section of HTML
JavaScript code in <body>…</body> section of HTML
JavaScript code in <head>…</head> and <body>…</body> sections of HTML
JavaScript code in <head>…</head> section of HTML
Example:
Output:
We can write internal JavaScript code by using a function.
Output:
JavaScript code in <body>…</body> section of HTML
BODY Section of HTML page
We can use function also in <body> section.
Note: The output will be same, but we can code in <body> or <head> section of HTML
JavaScript code in <head>…</head> and <body>…</body> sections of HTML
Output:
External JavaScript:
External JavaScript refers to a JavaScript file that is referenced by an HTML document with the "src" attribute of the "script" tag. JavaScript external file can be included in <head>..</head> or <body>…</body>
External JavaScript is when the JavaScript code is stored in a separate file and then linked to the HTML document using the <script> tag. This approach has several advantages, including:
- Code Reusability: By storing the JavaScript code in a separate file, it can be reused across multiple web pages, making it easier to maintain and update.
- Faster Load Time: Since the JavaScript code is stored in a separate file, it can be cached by the user's browser, resulting in faster load times for subsequent visits.
To include an external JavaScript file, you need to add the following code to your HTML document:
Step 1: Write the JavaScript code in any text editor. Here we use Sublime text.
Step 2: Save this file with any name and give the extension .js, inside the same directory (the directory where you saved the .html file). Here we give the file name me.js.
Step 3: Now, create your HTML file in text editor. (Here we crate external.html)
Step 4: In the "internal.html" file, add a reference to the "me.js" file in the head or body section of the HTML document using the script tag.
Step 5: Go to the location where you saved the HTML file and open it in any browser.
Now, whatever code you write in JavaScript file like me.js is going to be executed by HTML file
In the same way, we can create a function in JavaScript in separate files and call them in HTML file whenever needed.
Write JavaScript code in a text editor.
Now, include the external JavaScript file in the HTML file using the script tag and call the function by its name.
Output:
In the above program when you click on the Greet button the function written in the JavaScript file is called automatically.
Inline JavaScript
Inline JavaScript is when the JavaScript code is included directly in an HTML tag, such as the <button> tag. This approach should be used sparingly since it has several significant drawbacks, including:
- Code Duplication: Since the JavaScript code is included directly in an HTML tag, it cannot be reused across multiple web pages.
- Poor Readability: Since the JavaScript code is included directly in an HTML tag, it can make the HTML code difficult to read and maintain.
- Security Risks: Since the JavaScript code is included directly in an HTML tag, it can be vulnerable to cross-site scripting (XSS) attacks.
To include inline JavaScript, you need to add the following code to your HTML document:
Example:
Output:
Conclusion
In conclusion, external, internal, and inline JavaScript all have their advantages and disadvantages. External JavaScript is the preferred method since it promotes code reusability and faster load times. Internal JavaScript should be used sparingly and only when external scripts are not an option. Inline JavaScript should be avoided whenever possible since it can cause security risks and poor code readability.
When it comes to choosing the right method for including JavaScript in your web pages, consider the needs of your website and the trade-offs of each approach. By carefully weighing the pros and cons of each method, you can make an informed decision and create web pages that are dynamic, interactive, and secure.
.png)
.png)
.png)
%202080%20(2024)%20Optional%20II%20Computer%20Science%20Solution.png)
.png)
No comments:
Post a Comment