Wednesday, April 23, 2025

JavaScript External, Inline JS

External JavaScript and Internal JavaScript are two ways to include JavaScript code into an HTML document.

External JavaScript is when the JavaScript code is stored in a separate file with a .js extension and then linked to the HTML document using the script tag with the src attribute. This means that the JavaScript code is not included within the HTML document but is instead stored separately in a file. This method allows for better code organization and reusability since the same JavaScript file can be linked to multiple HTML documents.

Internal JavaScript is when the JavaScript code is included directly in the HTML document between the script tags. This method allows for quick and simple JavaScript code, but can make the HTML document larger and harder to read, especially when there is a lot of JavaScript code. 

In general, it's recommended to use external JavaScript files as much as possible for better code organization and reusability. Internal JavaScript can be used for small scripts that only need to be used on a single page.


<!DOCTYPE html>
<html>
<head>

<script src="main.js"></script>

</head>

<body>

<script>

	document.write("Hack The Planet");
	document.write("<br><br><br>");
	document.write("Mess with the best, die like the rest");

</script>
	
</body>
</html>

This HTML code defines a web page that includes an external JavaScript file main.js. The file path is specified in the src attribute of the <script> tag in the <head> section of the HTML document. The main.js file contains the JavaScript code that will be executed in the web page.

The code inside the <script> tag in the <body> section of the HTML document writes two lines of text on the web page using the document.write() method.

When the web page is loaded, the browser will parse the HTML and load the external main.js file, which will be executed on the client side. However, the main.js file is not included in this code snippet, so its content and behavior are unknown.

Content of main.js file:


alert("I am from External File");

Inline JavaScript for Google Link


<body>

<script>

	document.write("Hack The Planet");
	document.write("<br><br><br>");
	document.write("Mess with the best, die like the rest");

</script>

<ul>
	<li><a onclick="alert('I am from Inline')" href="https://google.com">Google</a></li>
	<li><a href="https://yahoo.com">Yahoo</a></li>
</ul>
	
</body>

This code creates an unordered list (<ul>) with two list items (<li>) that contain hyperlinks (<a>) to Google and Yahoo.

The first hyperlink has an onclick attribute which executes a JavaScript alert that displays the message "I am from Inline" when the link is clicked. The second hyperlink does not have any onclick attribute.

When the user clicks on the first hyperlink to Google, an alert pop-up with the message "I am from Inline" will appear before the user is redirected to the Google website. The second hyperlink to Yahoo will simply redirect the user to the Yahoo website.

No comments:

Post a Comment

Tkinter Introduction - Top Widget, Method, Button

First, let's make shure that our tkinter module is working ok with simple  for loop that will spawn 5 instances of blank Tk window .  ...