By /

JavaScript implementation

In this lecture, we will learn three different ways of JavaScript implementation in web page. JavaScript is integrated into web pages to add interactivity and dynamic behavior. Here’s how it’s typically implemented:

1. Inline JavaScript
  • Placement: JavaScript code is placed directly within an HTML element using the on* attributes.
  • Example:
<button onclick="alert('Button clicked!')">Click Me</button>
  • Pros: Simple for small, isolated scripts.
  • Cons: Can clutter HTML, making it harder to maintain and debug.
2. Internal JavaScript
  • Placement: JavaScript code is placed within <script> tags within the <head> or <body> of the HTML document.
  • Example:
<script>
function greet() {
alert("Hello, world!");
}
</script>
  • Pros: Better organization than inline JavaScript.
  • Cons: Can make the HTML file larger and less readable for complex scripts.
3. External JavaScript
  • Placement: JavaScript code is placed in a separate .js file. This file is then linked to the HTML document using the <script> tag.
  • Example:
<script src="myScript.js"></script>
  • Pros:
    • Improved code organization and maintainability.
    • Better performance as the browser can cache the JavaScript file.
    • Cleaner HTML code.
  • Cons: Requires an additional file to manage.
  • Example of External JavaScript:
<button onclick="greet()">Click Me</button>
<script src="myScript.js"></script>
//This is HTML Code
//Save This code as index.html
function greet() {
alert("Hello, world!");
}
//This is JavaScript Code
//Save This code as myScript.js

Choosing the Right Method

  • For small, simple scripts, inline JavaScript might be sufficient.
  • For larger or more complex scripts, external JavaScript is generally recommended for better organization and maintainability.
Scroll to Top