Simple web example showing unresolved "ReferenceError: $ is not defined"

I am trying to call a php from a javascript.

My code is longer, but I’m trying this simple example to see if
the call works.

The example consists of three files and when opening in the browser

localhost/myweb/mytest/example01/index.html

the alerts that appear in index.js should be displayed and it calls
index.php, which should write a message to a log file.

The files I use in my test example are:

index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF'8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Hello world</title>
    </head>
    
    <body>
        <script src="index.js"></script>
    </body>
</html>

index.js

alert("Hello world from javascript!");

debugger;

var myip = "192.168.1.20";
var myfile = "My_file_name";

$.get( 'index.php',{ paramIp: myip, fileSource: myfile }, 
						
			function( response ) {
																		
				if ( response.status == 'success' ) {											
                    alert("PHP returns OK");				
				}
				else {
                    alert("PHP returns ERROR");				
				}
			}
		)

index.php

<?php
$paramIp = (isset( $_GET['paramIp'] ))? $_GET['paramIp']: false;

$fileSource=  ( isset($_GET['fileSource'] ))?$_GET['fileSource']: "";

$fp = fopen("log_messages.txt", "a");
$date = (new DateTime("NOW"))->format("y-m-d H:i:s");
fwrite($fp, $date."index.php  paramIp = " . $paramIp . ", fileSource = ". $fileSource . PHP_EOL);
fclose($fp);


echo $fileSource;
?>

When I open the page in the browser

localhost/myweb/mytest/example01/index.html

The javascript alert is displayed, appearing the message

Hello world from javascript

But when continuing the execution of the script, I see that the php does not get executed and in FireBug the error is shown:

ReferenceError: $ is not defined

After consulting some posts in several forums that talk about this error, I have modified the original files, leaving them like this:

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="index.js"></script>
        <meta charset="UTF'8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Hello world</title>
    </head>
    
    <body>
        <script src="index.js"></script>
    </body>
</html>

index.js

$(document).ready(function(){
    alert('Hi from jQuery!');
    console.log('Hi from jQuery!');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

alert("Hello world from javascript!");

debugger;

var myip = "192.168.1.20";
var myfile = "My_file_name";

$.get( 'index.php',{ paramIp: myip, fileSource: myfile }, 
						
			function( response ) {
				if ( response.status == 'success' ) {											
                    alert("PHP returns OK");				
				}
				else {
                    alert("PHP returns ERROR");				
				}
			}
		)

index.php

<script type="text/javascript" src="index.js"></script>

<?php
$paramIp = (isset( $_GET['paramIp'] ))? $_GET['paramIp']: false;
$fileSource=  ( isset($_GET['fileSource'] ))?$_GET['fileSource']: "";

$fp = fopen("log_messages.txt", "a");
$date = (new DateTime("NOW"))->format("y-m-d H:i:s");
fwrite($fp, $date."index.php  paramIp = " . $paramIp . ", fileSource = ". $fileSource . PHP_EOL);
fclose($fp);

echo $fileSource;
?>

As before, the javascript alert is displayed, with the message

Hello world from javascript

But the php does not get executed and in FireBug the error is still shown:

ReferenceError: $ is not defined

you can’t impost with html in a *.js file. You need to have the script element in the *.html file